Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to set the properties of Css background style". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn how to set the properties of the Css background style.

1. CSS allows the use of solid colors as backgrounds and allows the use of background images to create quite complex effects.

Second, attributes:

Background-color sets the background color of the element

Body {background-color: darkgray;}

Test whether the background can be inherited

The property background-color cannot be inherited.

P {background-color: aqua;}

At this time, you can see that the p element adds a background color, but at this time the background color is relatively long, and it has gone beyond the scope of the text. If you want to modify it, you can only modify it in the css style, changing the width of the entire p tag.

P {width: 150px; background-color: aqua;}

Now you can see the effect that the width of the p tag has been modified, but the background color is a little narrow at this time, so you can widen it with a padding attribute.

P {width: 150px; padding: 10px; background-color: aqua;}

Background-p_w_picpath sets the picture as the background

Body {background-p_w_picpath: url ("1.jpg");}

You can also add a background color to a label separately.

P {background-p_w_picpath: url ("1.jpg");}

Background-position sets the starting position of the background picture

Body {background-p_w_picpath: url ("1.jpg"); background-repeat: no-repeat; background-position: right;}

At this time, the background picture runs to the right and there is only half of the picture left.

In fact, this attribute rarely appears alone, what we see is a right, in fact, there are two attributes.

Right stands for "right" and "center"

Right represents the location of the current view in which the picture is located

Center represents the location of the current picture to be displayed (that is, the picture is displayed from the middle)

At this time, you can make some changes to the background-position attribute value.

Background-position: right top

At this time, the background picture is displayed on the right side of the view, starting from the top of the picture (you can see the full display effect)

You can also add specific values to the background-position

Background-position: 0px 0px

At this time, the representative starts from the upper left corner (0pm 0).

In many cases, it is more convenient to use numerical values to determine its location.

Its position can also be determined by a percentage.

Whether the background-p_w_upload background image is fixed or scrolled with the rest of the page

Body {background-p_w_picpath: url ("1.jpg"); background-repeat: no-repeat; background-p_w_upload: fixed;}

By default, the background picture scrolls along the page

Here, set the background-p_w_upload property to not scroll with the page

Background-repeat sets whether and how to repeat the background picture

This has already been used in front of us.

Third, CSS3 background

Background-size specifies the size of the background picture

Body {background-p_w_picpath: url ("1.jpg"); background-repeat: no-repeat; background-size: 600px 600px;}

Background-origin specifies the location area of the background image.

Background-clip specifies the drawing area of the background

At this point, I believe you have a deeper understanding of "how to set the properties of the Css background style". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.