<!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>默認(rèn)</li>
<li>具體像素</li>
<li>百分比</li>
<li>寬度等比例拉伸</li>
<li>高度等比例拉伸</li>
<li>cover</li>
<li>contain</li>
</ul> -->
<!-- <ul>
<li>默認(rèn)</li>
<li>padding</li>
<li>border</li>
<li>content</li>
</ul> -->
<div class="">
</div>
</body>
</html>
第187課 背景尺寸屬性
背景尺寸屬性就是CSS3中新增的一個(gè)屬性乌逐，專門用于設(shè)置背景圖片大小
默認(rèn)：圖片按照自己的尺寸復(fù)制填滿整個(gè)元素
background-image: url("../image/o.gif");
具體像素：圖片根據(jù)設(shè)置的像素顯示
background-size: 100px 80px;
百分比：圖片根據(jù)元素的尺寸的百分比顯示
background-size: 50% 60%;
寬度等比例拉伸：圖片根據(jù)設(shè)定的高度等比例拉伸顯示
background-size: auto 50%;
高度等比例拉伸：圖片根據(jù)設(shè)定的寬度等比例拉伸顯示
background-size: 60% auto;
cover：圖片等比例拉伸甘改，并且直到寬度高度都填滿整個(gè)元素為止顯示
background-size: cover;
contain：圖片等比例拉伸恰梢，直到寬度或高度有一個(gè)填滿元素為止顯示
background-size: contain;
第188課 背景圖片定位區(qū)域?qū)傩?/h2>
告訴系統(tǒng)背景圖片從什么區(qū)域開始顯示奈梳，
默認(rèn)情況下從padding區(qū)域開始顯示
background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;
第189課 背景繪制區(qū)域?qū)傩?/h2>
背景繪制區(qū)域?qū)傩允菍ｉT用于指定從哪個(gè)區(qū)域開始繪制背景，
默認(rèn)情況下會(huì)從border區(qū)域開始繪制背景
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
第190課 多重背景圖片
多張背景圖片之間用逗號(hào)隔開即可
background:url("../image/o.gif") no-repeat left top,
url("../image/call.jpeg") no-repeat right top;
注意點(diǎn)
先添加的背景圖片會(huì)蓋住后添加的背景圖片
建議在編寫多重背景時(shí)拆開編寫
background-image: url("../image/o.gif"),url("../image/call.jpeg");
background-repeat: no-repeat;
background-position: left top, right top;
第191課 多重背景圖片練習(xí)
練習(xí)看代碼
