2022年9月16日 星期五

CSS background 3個應用範例

CSS 參考來源:點閱
CSS3 參考來源:點閱

現在大部份人使用 background 都是一個一個設定它的其它屬性,但若不涉及CSS3新增的屬性時,它其實可一次設定完畢!

-----------------------------------------------------
1、不同 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>


----------------------------------------------------------
2、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>


-----------------------------------------------------
3、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>