How to set the properties of Css background style
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!
