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 and 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 or height to fill the element ( only ensures that one side is filled)
background-size
2. Background image positioning area attribute
background-origin: 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.<a>padding-box</a>:默认值 >>background-origin: padding-box; 告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示; 2.<a>border-box</a> >> background-origin:border-box; 从border位置开始 3.<a>content-box</a> >> background-origin:content-box;从content位置开始
<html lang="en"> <head> <meta charset="UTF-8"> <title>113-背景图片定位区域属性</title> <style> *{ margin: 0; padding: 0; } ul li{ list-style: none; float: left; width: 100px; height: 100px; text-align: center; line-height: 100px; border: 20px dashed #000; padding: 50px; margin-left: 20px; background: url("images/dog.jpg") no-repeat; } ul li:nth-child(2){ /* 告诉系统背景图片从什么区域开始显示, 默认情况下就是从padding区域开始显示 */ background-origin: padding-box; } ul li:nth-child(3){ background-origin:border-box; } ul li:nth-child(4){ background-origin:content-box; } </style> </head> <body> <ul> <li>默认</li> <li>padding</li> <li>border</li> <li>content</li> </ul> </body> </html> Background image positioning area attribute
3. Background drawing Area attributes
<a>background-clip:xxx;</a>背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景
<html lang="en"> <head> <meta charset="UTF-8"> <title>114-背景绘制区域属性</title> <style> *{ margin: 0; padding: 0; } ul li{ list-style: none; float: left; width: 100px; height: 100px; text-align: center; line-height: 100px; border: 20px dashed #000; padding: 50px; margin-left: 20px; background: red url("images/dog.jpg") no-repeat; } ul li:nth-child(2){ /* 背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景 */ background-clip: padding-box; } ul li:nth-child(3){ background-clip: border-box; } ul li:nth-child(4){ background-clip: content-box; } </style> </head> <body> <ul> <li>默认</li> <li>padding</li> <li>border</li> <li>content</li> </ul> </body> </html> Background drawing area attributes (red is the drawing area)
4. Multiple background images
The background image added first will be covered After adding the background image
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:
115-多重背景图片
Multiple background pictures
Four. Multiple background pictures contact
<a>先添加的背景图片会盖住后添加的背景图片</a>
<html lang="en"> <head> <meta charset="UTF-8"> <title>116-多重背景图片-练习</title> <style> *{ 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; } } </style> </head> <body> <p></p> </body> </html>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
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
