How css uses background-size
This article is about how css uses background-size. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
Sets the size of the background picture, displayed as a length value or percentage, and can also be scaled by cover and contain.
Syntax:
Background-size: auto | cover | contain
Value description:
1. Auto: default value, which does not change the original height and width of the background image
2. If 200px 50px appears in pairs, set the width and height of the background image to the first two values in turn, and when you set a value, scale it proportionally as the width value of the picture.
3. Any value between 0% 100%. Set the width and height of the background picture to the value obtained by multiplying the width and height of the element by the previous percentage. When setting a value, it is the same as above.
4. Cover: as the name implies, the background image is scaled proportionally to fill the entire container.
5. Contain: hold, that is, the background image is scaled to one side close to the edge of the container.
Tip: you can enter your own code in the editing window on the right to try different values.
The code is as follows:
Background picture size
.demo {
Background: url (http://static.mukewang.com/static/img/logo_index.png) no-repeat
Width: 300px
Height: 140px
Border: 1px solid # 999
Background-size:cover
}
Thank you for reading! This is the end of this article on "how css uses background-size". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!
