一. 背景尺寸属性
1.什么是背景尺寸属性
背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小
background-size:xxxx;
取值:
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告诉系统图片需要等比拉伸
- 5.2告诉系统图片需要拉伸到宽度<a>和</a>高度都填满元素
6. contain >> background-size:contain;
- 6.1告诉系统图片需要等比拉伸
- 6.2告诉系统图片需要拉伸到宽度<a>或</a>高度都填满元素(<a>只保证一边填满</a>)
二. 背景图片定位区域属性
<a>background-origin</a> : 告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示;
取值:
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>
三. 背景绘制区域属性
<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>
四. 多重背景图片
<a>先添加的背景图片会盖住后添加的背景图片</a>
元素
c3
之后可以设置多张背景图片
多张背景图片之间用逗号隔开即可
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;
注意点:
先添加的背景图片会盖住后添加的背景图片
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;
完整代码如下:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>115-多重背景图片</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
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;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
四.多重背景图片联系
<a>先添加的背景图片会盖住后添加的背景图片</a>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>116-多重背景图片-练习</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
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;//由于白云的图片尺寸为2247*190,保持它原有的就尺寸可以了
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>
<div></div>
</body>
</html>