<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
/*ul{
width: 800px;
height: 1200px;
margin:100px auto;
}
li {
list-style: none;
width: 200px;
height: 200px;
float: left;
margin:30px;
border: 1px solid;
text-align: center;
line-height: 200px;
}
ul li:nth-child(1){
background: url("../image/o.gif") no-repeat;
}
ul li:nth-child(2){
background: url("../image/o.gif") no-repeat;
background-size: 100px 80px;
}
ul li:nth-child(3){
background: url("../image/o.gif") no-repeat;
background-size: 50% 60%;
}
ul li:nth-child(4){
background: url("../image/o.gif") no-repeat;
background-size: auto 50%;
}
ul li:nth-child(5){
background: url("../image/o.gif") no-repeat;
background-size: 60% auto;
}
ul li:nth-child(6){
background: url("../image/o.gif") no-repeat;
background-size: cover;
}
ul li:nth-child(7){
background: url("../image/o.gif") no-repeat;
background-size: contain;
}*/
/*li{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
border: 20px dashed;
padding: 50px;
margin-left: 20px;
background: url("../image/o.gif") no-repeat;
float: left;
}
ul li:nth-child(2){
background-origin: padding-box;
}
ul li:nth-child(3){
background-origin: border-box;
}
ul li:nth-child(4){
background-origin: content-box;
}*/
/*li{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
border: 20px dashed;
padding: 50px;
margin-left: 20px;
background: red url("../image/o.gif") no-repeat;
float: left;
}
ul li:nth-child(2){
background-clip: padding-box;
}
ul li:nth-child(3){
background-clip: border-box;
}
ul li:nth-child(4){
background-clip: content-box;
}*/
/*div {
width: 500px;
height: 500px;
border: 1px solid;
margin: 100px auto;
background:url("../image/o.gif") no-repeat left top,
url("../image/call.jpeg") no-repeat right top;
background-image: url("../image/o.gif"),url("../image/call.jpeg");
background-repeat: no-repeat;
background-position: left top, right top;
}*/
div{
width: 600px;
height: 190px;
border: 1px solid;
margin: 100px auto;
background-image: url("../image/call.jpeg"),url("../image/call.jpeg"),url("../image/o.gif");
background-repeat: no-repeat;
background-size: 50px 50px, 50px 50px, 2000px 190px;
background-position: 50px 150px,400px 50px, 0px 0px;
animation: move 10s linear 0s infinite normal;
}
@keyframes move {
from{
background-position: 50px 50px, 400px 50px, 0px 0px;
}
to{
background-position: 500px -150px, 400px 50px, -600px 0px;
}
}
</style>
</head>
<body>
<!-- <ul>
<li>默认</li>
<li>具体像素</li>
<li>百分比</li>
<li>宽度等比例拉伸</li>
<li>高度等比例拉伸</li>
<li>cover</li>
<li>contain</li>
</ul> -->
<!-- <ul>
<li>默认</li>
<li>padding</li>
<li>border</li>
<li>content</li>
</ul> -->
<div class="">
</div>
</body>
</html>
第187课 背景尺寸属性
背景尺寸属性就是CSS3中新增的一个属性，专门用于设置背景图片大小
默认：图片按照自己的尺寸复制填满整个元素
background-image: url("../image/o.gif");
具体像素：图片根据设置的像素显示
background-size: 100px 80px;
百分比：图片根据元素的尺寸的百分比显示
background-size: 50% 60%;
宽度等比例拉伸：图片根据设定的高度等比例拉伸显示
background-size: auto 50%;
高度等比例拉伸：图片根据设定的宽度等比例拉伸显示
background-size: 60% auto;
cover：图片等比例拉伸，并且直到宽度高度都填满整个元素为止显示
background-size: cover;
contain：图片等比例拉伸，直到宽度或高度有一个填满元素为止显示
background-size: contain;
第188课 背景图片定位区域属性
告诉系统背景图片从什么区域开始显示，
默认情况下从padding区域开始显示
background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;
第189课 背景绘制区域属性
背景绘制区域属性是专门用于指定从哪个区域开始绘制背景，
默认情况下会从border区域开始绘制背景
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
第190课 多重背景图片
多张背景图片之间用逗号隔开即可
background:url("../image/o.gif") no-repeat left top,
url("../image/call.jpeg") no-repeat right top;
注意点
先添加的背景图片会盖住后添加的背景图片
建议在编写多重背景时拆开编写
background-image: url("../image/o.gif"),url("../image/call.jpeg");
background-repeat: no-repeat;
background-position: left top, right top;
第191课 多重背景图片练习
练习看代码
