Background-related attributes in HTML and CSS

This time I will bring you the background-related attributes in HTML and CSS. What are the precautions for using the background-related attributes in HTML and CSS? The following is a practical case, let's take a look.

1. Background size attribute

1. What is the background size attribute
The background size attribute is a new attribute in CSS3, specifically used to set the size of background images

background-size:xxxx;

Value:

1.具体像素 >> background-size:200px 100px;
2.百分比 >> background-size:100% 80%;
3.宽度等比拉伸 >> background-size:auto 100px;
4.高度等比拉伸 >> background-size:100px auto;
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 proportionally Stretch until both width 3499910bf9dac5ae3c52d5ede7383485 and 5db79b134e9f6b82c0b36e0489ee08ed height fill the element

6. contain >> background-size:contain;

6.1 Tell the system that the image needs to wait Than stretch

6.2 Tell the system that the image needs to be stretched to the width 3499910bf9dac5ae3c52d5ede7383485 or 5db79b134e9f6b82c0b36e0489ee08ed height to fill the element (3499910bf9dac5ae3c52d5ede7383485 only ensures that one side is filled5db79b134e9f6b82c0b36e0489ee08ed)

background-size

2. Background image positioning area attribute

3499910bf9dac5ae3c52d5ede7383485background-origin5db79b134e9f6b82c0b36e0489ee08ed: Tell the system about the background image From what area to start displaying, by default it starts to display from the padding area;

Value:

1.padding-box:默认值 >>background-origin: padding-box; 告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示;
 2.border-box >>  background-origin:border-box; 从border位置开始
 3.content-box >>  background-origin:content-box;从content位置开始

                 
  
     
默认
     
padding
     
border
     
content
 
  

Background image positioning area attribute

3. Background drawing Area attributes

background-clip:xxx;背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景
                 
  
     
默认
     
padding
     
border
     
content
 
  

Background drawing area attributes (red is the drawing area)

4. Multiple background images

3499910bf9dac5ae3c52d5ede7383485The background image added first will be covered After adding the background image5db79b134e9f6b82c0b36e0489ee08ed

After the element c3, you can set multiple background images
Multiple background images can be separated by commas

background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom;

Note :

The background image added first will cover the background image added later

background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom,url("images/animal4.png") no-repeat right bottom,url("images/animal5.png") no-repeat center center;

It is recommended to separate 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: left top, right top, left bottom;

The complete code is as follows:

9fd01892b579bba0c343404bcccd70fb 93f0f5c25f18dab9d176bd4f6de5d30e     a80eb7cbb6fff8b0ff70bae37074b813     b2386ffb911b14667cb8f0f91ea547a7115-多重背景图片6e916e0f7d1e588d4f442bf645aedb2f     c9ccee2e6ea535a969eb3f532ad9fe89         *{             margin: 0;             padding: 0;         }         p{             width: 500px;             height: 500px;             border: 1px solid #000;             margin: 0 auto;             /*             多张背景图片之间用逗号隔开即可             注意点:             先添加的背景图片会盖住后添加的背景图片             建议在编写多重背景时拆开编写             */             /*background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom,url("images/animal4.png") no-repeat right bottom,url("images/animal5.png") no-repeat center center;*/             background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");             background-repeat: no-repeat, no-repeat, no-repeat;             background-position: left top, right top, left bottom;         }     531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e

Multiple background pictures

Four. Multiple background pictures contact

3499910bf9dac5ae3c52d5ede7383485先添加的背景图片会盖住后添加的背景图片5db79b134e9f6b82c0b36e0489ee08ed
9fd01892b579bba0c343404bcccd70fb 93f0f5c25f18dab9d176bd4f6de5d30e     a80eb7cbb6fff8b0ff70bae37074b813     b2386ffb911b14667cb8f0f91ea547a7116-多重背景图片-练习6e916e0f7d1e588d4f442bf645aedb2f     c9ccee2e6ea535a969eb3f532ad9fe89         *{             margin: 0;             padding: 0;         }         p{             width: 600px;             height: 190px;             border: 1px solid #000;             margin: 100px auto;                       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: 50px 50px, 50px 50px, auto auto;          background-position: 50px 150px, 400px 50px, 0px 0px;             animation: move 10s linear 0s infinite normal;         }         @keyframes move {             from{                 background-position: 50px 150px, 400px 50px, 0px 0px;             }             to{                 background-position: 500px -150px, 400px 50px, -600px 0px;             }         }     531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e

I believe you have mastered the method after reading the case in this article. For more exciting things, please pay attention to php Chinese Other related articles online!

Recommended reading:

2D conversion module in HTML and CSS

##Transition module in HTML and CSS

Positioning in H5

The above is the detailed content of Background-related attributes in HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!