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

Editor to share with you how to use the background-related attributes in HTML and CSS, I believe most people don't know much about it, so share this article for your reference. I hope you can learn a lot after reading this article, so let's learn about it!

one。 Background size Properti

1. What is the background size attribute

Background size property is a new property in CSS3, which is specially used to set the size of the background image.

Background-size:xxxx

Value:

1. Specific pixels > > background-size:200px100px

two。 Percentage > > background-size:100%80%

3. Width proportional stretch > > background-size:auto100px

4. Height proportional stretching > > background-size:100pxauto

5.cover > > background-size:cover

5.1 tell the system that the picture needs to be stretched proportionally

5.2 tell the system that the picture needs to be stretched to the width and height to fill the elements.

6.contain > > background-size:contain

6.1 tell the system that the picture needs to be stretched proportionally

6.2 tell the system that the picture needs to be stretched to the width or height to be filled with elements (only one side is guaranteed to be filled)

Background-size

two。 Background picture positioning area properties

Background-origin: tells the system where the background image is displayed. By default, it starts from the padding area.

Value:

1.padding-box: default > > background-origin:padding-box; tells the system where the background image is displayed. By default, it starts from the padding area.

2.border-box > > background-origin:border-box; starts at the border location

3.content-box > > background-origin:content-box; starts at the content location

113-background image location area attribute * {margin:0;padding:0;} ulli {list-style:none;float:left;width:100px;height:100px;text-align:center;line-height:100px;border:20pxdashed#000;padding:50px;margin-left:20px;background:url ("images/dog.jpg") no-repeat } ulli:nth-child (2) {/ * tells the system where the background image is displayed. By default, it starts to display * / background-origin:padding-box;} ulli:nth-child (3) {background-origin:border-box;} ulli:nth-child (4) {background-origin:content-box;} default paddingbordercontent from the padding area.

Background picture positioning area properties

three。 Background drawing area attribut

The background-clip:xxx; background drawing area attribute is specifically used to specify the area from which the background is drawn. By default, the background is drawn from the border area.

114-background drawing area attribute * {margin:0;padding:0;} ulli {list-style:none;float:left;width:100px;height:100px;text-align:center;line-height:100px;border:20pxdashed#000;padding:50px;margin-left:20px;background:redurl ("images/dog.jpg") no-repeat } ulli:nth-child (2) {/ * background drawing area attribute is specifically used to specify the area from which the background is drawn. By default, the background is drawn from the border area * / background-clip:padding-box;} ulli:nth-child (3) {background-clip:border-box;} ulli:nth-child (4) {background-clip:content-box;} default paddingbordercontent

Background drawing area attribute (red is the drawing area)

four。 Multiple background picture

The background picture added first will cover the background picture that is added later.

Multiple background pictures can be set after element c3

Multiple background pictures can be separated by commas.

Background:url ("images/animal1.png") no-repeatlefttop,url ("images/animal2.png") no-repeatrighttop,url ("images/animal3.png") no-repeatleftbottom

Note:

The background picture added first will cover the background picture that is added later.

Background:url ("images/animal1.png") no-repeatlefttop,url ("images/animal2.png") no-repeatrighttop,url ("images/animal3.png") no-repeatleftbottom,url ("images/animal4.png") no-repeatrightbottom,url ("images/animal5.png") no-repeatcentercenter

It is recommended to take apart and write when writing multiple backgrounds.

Background-image:url ("images/animal1.png"), url ("images/animal2.png"), url ("images/animal3.png"); background-repeat:no-repeat,no-repeat,no-repeat;background-position:lefttop,righttop,leftbottom

The complete code is as follows:

115-multiple background images * {margin:0;padding:0;} p {width:500px;height:500px;border:1pxsolid#000;margin:0auto / * separate multiple background images with commas. Note: the background image added first will cover the background image added later. It is recommended to disassemble and write * / * background:url ("images/animal1.png") no-repeatlefttop,url ("images/animal2.png") no-repeatrighttop,url ("images/animal3.png") no-repeatleftbottom,url ("images/animal4.png") no-repeatrightbottom,url ("images/animal5.png") no-repeatcentercenter when writing multiple backgrounds. * / background-image:url ("images/animal1.png"), url ("images/animal2.png"), url ("images/animal3.png"); background-repeat:no-repeat,no-repeat,no-repeat;background-position:lefttop,righttop,leftbottom;}

Multiple background picture

four。 Multi-background picture connection

The background picture added first will cover the background picture that is added later.

116-multiple background pictures-exercise * {margin:0;padding:0;} p {width:600px;height:190px;border:1pxsolid#000;margin:100pxauto;background-image:url ("images/bg-plane.png"), url ("images/bg-sun.png"), url (images/bg-clouds.png); background-repeat:no-repeat,no-repeat,no-repeat;background-size:50px50px,50px50px,autoauto;background-position:50px150px,400px50px,0px0px;animation:move10slinear0sinfinitenormal } @ keyframesmove {from {background-position:50px150px,400px50px,0px0px;} to {background-position:500px-150px,400px50px,-600px0px;}}

The above is all the content of this article entitled "how to use background-related attributes in HTML and CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.