在CSS中對背景圖片進行設定相關屬性

枕夢發表於2017-04-15
CSS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            width: 100%;
            height: 350px;
            border: 1px solid red;
            background-color: blue;
            background-image: url("../../img/lianxiang.jpg");
            /*background-repeat:圖片平鋪*/
            background-repeat: no-repeat;
           /* background-position: 20px ;!*左邊距邊框20px，垂直居中*!*/
            background-position: center top;
            /*背景圖片的大小
            contain:圖片寬高等比例縮放，直到寬或高填滿父部，可能出現圖片填充佈局不完整。
            cover:圖片寬和高都等比例縮放，直到較小的寬或高填滿父佈局，可能出現圖片溢位。*/
            background-size: cover;
        }
    </style>
    <title>背景圖片</title>
</head>
<body>

<div>
    
</div>

</body>
</html>

相關文章