HTML serial 32- background color, background image, background fill

One, background

1. How to set the background color of the label

(1) there is a background-color in CSS: attribute value; is designed to set the background color of the label.

(2) Value: specific words, RGB, RGBA, hexadecimal

example:

    <style>

        .p1{

            background-color: red;

        }

        .p2{

            background-color: rgb(0,255,0);

        }

        .p3{

            background-color: rgba(0,0,255,1);

        }

        .p4{

             background-color: #00ffff;

         }

</style>

</head>

<body>

<p class="p1">I Trials </ the p- > 

< the p- class = "P2" > I'm Trials </ the p- > 

< the p- class = "p3" > I'm Trials </ the p- > 

< the p- class = "P4" > I Trials </ P >

2. How to set the background image?

(1) it has called in the CSS background-image: url (); attributes, is designed to set the background image.

(2) Note:

Among i. Pictures of address needs to be placed url () brackets, pictures of address can be a local address, or the address of the network.

ii. If the picture size sufficient to cover the size of our claims, it will automatically fill in the tiling and the horizontal and vertical directions.

iii. If there is a picture on the page, the browser sends a request again to obtain pictures

example:

        {.P1 

            height: 600px; 

            width: 600px; 

            background-Color: Red; 

            background-Image: URL ( "Image / play_tennis.jpg"); 

        } 

 ......... ...... omitted Code .. 

 < the p- class = "p1" > I'm Trials </ the p- >

3. Background Tile: How do we set the background image?

(1) has a property background-repeat in CSS is called, is designed to control the tiled background image.

Value:

repeat: By default, in the horizontal and vertical directions are required tile.

no-repeat: Tile not required in the horizontal and vertical directions.

repeat-x: Tile only in the horizontal direction.

repeat-y: tiled in the vertical direction only.

example:

        {.P1 

            height: 1000px; 

            width: 600px; 

            background-Color: Red; 

            background-Image: URL ( "Image / play_tennis.jpg"); 

            / * background-REPEAT:! REPEAT; * default is repeat, the meaning image size is unchanged, the designated area can be covered * * /! 

            / * background-REPEAT:! NO-REPEAT; * this means that the picture on a shop, then have to empty the place Motian on *! * / 

            background-REPEAT: REPEAT-X; 

        } 

......... omitted codes ........ 

< P class = "P1" > I Trial </ P >

(3) application scenarios: a plurality of filler used for the background. To reduce the size of the picture by tiling background image, improve web access speed

Second, the source code:

d94_background_color_and_image_and_tile_way.html

address:

https://github.com/ruigege66/HTML_learning/blob/master/d94_background_color_and_image_and_tile_way.html

2.CSDN: https: //blog.csdn.net/weixin_44630050 (Xi Jun Jun Moods do not know - Rui)

3. Park blog: https: //www.cnblogs.com/ruigege0000/

4. Welcomes the focus on micro-channel public number: Fourier transform, backstage reply "gifts" get big data learning Java ceremony video

HTML serial 32- background color, background image, background fill

Guess you like