6、背景

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景</title>
    <style type="text/css">
        div{
            width:500px;
            height:500px;
            border:1px solid red;

            background-color:skyblue;
            background-image:url('img/0.jpg');
            background-repeat:no-repeat;    /*圖片不平鋪*/
            background-size:200px 200px;    /*寬高*/
            background-size:cover;      /*鋪滿*/
            background-size:contain;    /*x-y等比例縮放鋪滿*/

            background-size:200px 200px;
            background-position:center; /* 默認x-y 寫一個，另一個默認居中*/

            background: yellow url('img/0.jpg') no-repeat center/center;  /*復(fù)合屬性*/
        }
    </style>
</head>
<body>
    <div>
        <!-- <img src="img/0.jpg" alt='' width='400px'> -->
    </div>
</body>
</html>

      background-color 背景色
      background-image 背景圖片
      background-repeat 背景平鋪
           repeat 平鋪 默認
           repeat-x  平鋪x
           repeat-y  平鋪y
           np-repeat  不平鋪
           注意：只有背景圖片的寬高小于被設(shè)置的元素的寬高，才會有平鋪效果

     background-position 背景位置 x軸 y軸
        x軸 left center right
        y軸 top center bottom
        如果只給一個值，默認在x軸，y軸默認center(50%)
        % px

    background-size 背景大小
    % px
    給一個值的時候，默認x軸，y軸默認auto auto會等比縮放
    cover 等比例縮放直到鋪滿x,y軸 可以鋪滿整個框 但是不一定能看到完整的圖片
    contain 等比例縮放x軸或者y軸其中的一個方向 不一定鋪滿 但是可以看到整個圖片
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容