慕課前端入門-CSS背景與漸變
阿新 • • 發佈：2020-08-29
1.CSS背景
1.1.CSS背景影象區域
background-clip屬性：指定背景繪製區域
- border-box:邊框盒子。從邊框開始繪製，邊框之外會被裁剪
- padding-box:內邊距盒子。從內邊距開始繪製，padding之外會被裁剪
- content-box:內容盒子。從內容開始繪製，content之外會被裁剪
示例程式碼
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{margin: 0;padding:0;border: none;} div{ width: 800px; height: 400px; padding:50px; border:50px solid transparent; background:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598670301812&di=1ea12ffd008f4051c8fd63a385bc6c24&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1405%2F19%2Fc40%2F34408218_1400509117117.jpg") no-repeat center center; /*background-clip: border-box;*/ background-clip: padding-box; /*background-clip: content-box;*/ } span.div_border{ position: absolute; top:0; left: 0; width: 800px; height: 400px; padding:50px; border:50px solid red; opacity: 0.5; } span.div_padding{ position: absolute; top:50px; left:50px; width: 800px; height: 400px; border:50px solid green; opacity: 0.5; } </style> </head> <body> <div></div> <span class="div_border"></span> <span class="div_padding"></span> </body> </html>
示例2:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>background-clip</title> <style type="text/css"> .border,.padding,.content{/*給最外層的div設定樣式*/ width:300px;height:300px; float:left;margin-left:50px; } a{ text-decoration:none; font-size:30px; } .div1,.div2,.div3{/*放置背景圖片的div樣式*/ width:220px;height:200px; border:10px solid rgba(0,255,0,0.3); padding:50px; background-image:url("http://climg.mukewang.com/582c316e0001fd6507000210.jpg"); margin-top:50px; display: none; } .border:hover div,.padding:hover div,.content:hover div{ display:block; } /*補充程式碼*/ .div1{background-clip: border-box;} .div2{background-clip: padding-box;} .div3{background-clip: content-box;} </style> </head> <body> <div class="border"> <a href="">border-box</a> <div class="div1"></div> </div> <div class="padding"> <a href="">padding-box</a> <div class="div2"></div> </div> <div class="content"> <a href="">content-box</a> <div class="div3"></div> </div> </body> </html>
1.2.CSS背景影象定位
background-origin屬性：設定元素背景片的原始起始位置，偏移量在background中設定。
- border-box:邊框盒子。以邊框開始位置作為原點
- padding-box:內邊距盒子。以內邊距開始位置作為原點
- content-box:內容盒子。以內容開始位置作為原點
示例程式碼
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{margin: 0;padding:0;border: none;} div{ width: 800px; height: 400px; padding:50px; border:50px solid transparent; background:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598670301812&di=1ea12ffd008f4051c8fd63a385bc6c24&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1405%2F19%2Fc40%2F34408218_1400509117117.jpg") no-repeat 50px 100px; /*background-origin: border-box;*/ /*background-origin: padding-box;*/ background-origin: content-box; } span.div_border{ position: absolute; top:0; left: 0; width: 800px; height: 400px; padding:50px; border:50px solid red; opacity: 0.5; } span.div_padding{ position: absolute; top:50px; left:50px; width: 800px; height: 400px; border:50px solid green; opacity: 0.5; } </style> </head> <body> <div></div> <span class="div_border"></span> <span class="div_padding"></span> </body> </html>
作業
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>background-origin</title>
<style type="text/css">
div{
width: 400px;
height: 150px;
padding:10px;
border:10px solid #acacac;
background:url("http://climg.mukewang.com/582c342b0001fd6507000210.jpg") no-repeat center center;
background-origin:padding-box;
}
div:hover{
background:url("http://climg.mukewang.com/582c34220001091605000150.jpg") no-repeat 10px 10px;
background-origin: content-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.3.CSS背景影象大小
background-size屬性：指定背景圖片大小
- 具體數值
- 百分比
- cover 即將圖片等比例縮放以填滿整個容器，長和寬至少有一個為100%，另一個可能會超出，超出的部分會被裁剪。
- contain 即將背景圖片等比例縮放至某一邊緊貼容器邊緣位置。長或寬至少有一個為100%，另一個可能會留白
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>background-size</title>
<style type="text/css">
a{text-decoration:none;}
ul{list-style:none;}
div{
background-image:url("http://climg.mukewang.com/582c37e50001b08102000065.jpg");
width:100px;height:100px;
display:none;border:2px solid red;
background-repeat:no-repeat;
}
/*補充程式碼*/
.length:hover div{
display: block;
background-size:100px 100px;
}
.percent:hover div{
display: block;
background-size:50% 50%;
}
.cover:hover div{
display: block;
background-size:cover;
}
.contain:hover div{
display: block;
background-size:contain;
}
</style>
</head>
<body>
<h2>background-size不同屬性值不同效果</h2>
<ul>
<li class="length">
<h3><a href="">100px 100px</a></h3>
<div></div>
</li>
<li class="percent">
<h3><a href="">50% 50%</a></h3>
<div></div>
</li>
<li class="cover">
<h3><a href="">cover</a></h3>
<div></div>
</li>
<li class="contain">
<h3><a href="">contain</a></h3>
<div></div>
</li>
</ul>
</body>
</html>
1.4.CSS多重背景影象
background-image:url(), url();前面的影象會覆蓋後面的影象
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 800px;
height: 500px;
background:no-repeat center center;
background-image: url("water.png"),url("wechat.jpeg");
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>background屬性</title>
<style type="text/css">
/*此處寫程式碼*/
div{
width: 400px;
height: 300px;
border:20px solid #e87d7d;
paddding:20px;
background: #acacac no-repeat center center;
background-image: url(http://climg.mukewang.com/582c39c00001091605000150.jpg);
background-size: 90% ;
background-origin: padding-box;
}
</style>
</head>
<body>
<!-- 此處寫程式碼 -->
<div>慕課網</div>
</body>
</html>
1.5 CSS背景整合
背景屬性可以在一個宣告中設定所有的背景屬性
- color:顏色
- position:背景圖片位置
- size:圖片大小尺寸
- repeat:是否重複
- orgin:定位
- clip：區域
- attachment：狀態（隨著頁面滾屏，還是固定不變）
- image:背景圖片的URL
div{
background: #abcdef center 50% no-repeat content-box content-box fixed url();
}
div{
background: #abcdef center no-repeat url();/*css直接完成，下面的機制不一樣，建議分開寫*/
background-size: 50%;
background-origin: content-box;
background-clip: content-box;
background-attachment: fixed;
}