CSS 參考來源：點閱
CSS3 參考來源：點閱
現在大部份人使用 background 都是一個一個設定它的其它屬性，但若不涉及CSS3新增的屬性時，它其實可一次設定完畢！
-----------------------------------------------------
１、不同 Background 的宣告方式
-----------------------------------------------------
<!DOCTYPE html>
<html><head></head>
<body>
<style>
div{
border:1px solid red;
width:200px;
height:200px;
}
.test1{
/* 原始大小 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
}
.test2{
/* 新舊語法混合用，圖像最大化且不失真 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
background-size:contain;
}
.test3{
/* 新舊語法混合用，圖像最大化，要固定在div背面時，「卻穿透粘在body背景」 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat fixed;
background-size:contain;
}
.test4{
/* 新舊語法混合用，圖像最大化且失真 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
background-size:cover;
}
.test5{
/* 只用新語法，圖像最大化且不失真 */
background-image:url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me');
background-repeat:no-repeat;
background-size:contain;
background-attachment:;
}
</style>
第一個（原始大小）<br/>
<div class="test1"></div>
<p><br/>
第二個（一個 background 把各屬性全宣告完畢，結果正常）<br/>
<div class="test2"></div>
<p><br/>
第三個（要固定在div背面時，「卻穿透粘在body背景」）<br/>
<div class="test3"></div>
<p><br/>
第四個（background-size:cover 使底端不能正常顯示）<br/>
<div class="test4"></div>
<p><br/>
第五個（使用多個屬性才宣告完畢，結果也是正常）<br/>
<div class="test5"></div>
</body>
</html>
----------------------------------------------------------
２、background 上傳圖片及設定之運用
----------------------------------------------------------
<!DOCTYPE html>
<html><head></head>
<body>
<style>
div{
border:1px solid red;
width:200px;
height:200px;
}
.test1{
/* 使用原始大小 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
}
.test2{
/* 新舊語法混合用，圖像最大化且不失真 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
background-size:contain;
}
.test3{
/* 新舊語法混合用，Div 背景圖像最大化，固定在背景時『卻穿透粘在body背景上』*/
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat fixed;
background-size:contain;
}
.test4{
/* 新舊語法混合用，圖像最大化且失真 */
background: #fff url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me') no-repeat;
background-size:cover;
}
.test5{
/* 只用新語法，圖像最大化且不失真 */
background-image:url('https://drive.google.com/uc?export=view&id=1bEx-mum880QycaawzUN7I26weTMNS-Me');
background-repeat:no-repeat;
background-size:contain;
background-attachment:;
}
</style>
<div class="test1"></div>
<p>
<div class="test2"></div>
<p>
<div class="test3"></div>
<p>
<div class="test4"></div>
<p>
<div class="test5"></div>
</body>
</html>
-----------------------------------------------------
３、background 之二圖片合併應用
-----------------------------------------------------
<!DOCTYPE html>
<html><head></head>
<body>
<style>
#example1 {
margin-top:0px;
background: url(https://drive.google.com/uc?export=view&id=1-J20rOq4FT45R9Fqe1PJmahdBwnX5zZ0) right bottom no-repeat, url(https://drive.google.com/uc?export=view&id=1W-VLYg2ZvLcyvcrw2bOMWKYDd7Lc12Lg) left top repeat;
padding: 15px;
}
</style>
<div id="example1">
<h1>不是痛苦，只是不痛快</h1>
<p>一些官員只求自己職位，疏忽了人民需求，不是停用就是搞網軍。若一個國家會衰敗，這些蠹蟲是禍首！</p>
<p>我自反省，由於已看透這些爪耙子的底細，因他們而導致國民之損失，我並不感覺痛苦，只是心中不痛快而已～</p>
</div>
</body>
</html>
