今天有小伙件來咨詢一個關于CSS中設置背景圖片不重復的小問題,給他解答的同時順便寫一下教程,詳細介紹一下CSS如何設置背景圖片,以及設置背景圖片的顯示方式等。

CSS設置背景圖片

在CSS中,我們可以利用 background 屬性來設置背景圖片,如下面的代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>演示背景圖片</title>
    <style>
    body{
        background: url('20190621232252.png');
    }
    </style>
</head>
<!--飛鳥慕魚博客-->
<body>
</body>
</html>

運行代碼我們發現,背景圖片無論是橫向或是縱向都是重復,直至鋪滿整個顯示區域。

CSS背景圖片

CSS background-repeat 屬性

CSS中有個 background-repeat 屬性,可以設置圖片背景圖片是否重復以及如何重復,它的默認值是橫向和縱向都會重復,如果不設置此屬性的值,那么背景圖片就如上面的示例代碼一樣,會橫向以及縱向同時重復,并鋪滿整個要顯示的區域。

它有三個可以設置的值,分別如下,其中 repeat 值為默認。

国产视频apprepeat :默認。背景圖像將在垂直方向和水平方向重復。

repeat-x :背景圖像將在水平方向重復。

国产视频apprepeat-y :背景圖像將在垂直方向重復。

国产视频appno-repeat :背景圖像將僅顯示一次。

国产视频appinherit :規定應該從父元素繼承 background-repeat 屬性的設置。

css背景圖片只水平方向(橫向)重復

CSS代碼:

body{
    background: url('20190621232252.png');
    background-repeat:repeat-x;
}

国产视频app運行結果如下圖,背景圖片都是水平方向重復的

CSS背景圖片

css背景圖片縱向重復

CSS代碼

body{
    background: url('20190621232252.png');
    background-repeat:repeat-y;
}

運行結果如下圖,背景圖片都是縱向重復

CSS背景圖片

css背景圖片不重復

CSS代碼

body{
    background: url('20190621232252.png');
    background-repeat:no-repeat;
}

運行結果如下圖,背景圖片橫向以及縱向都不會重復,只會顯示一張

CSS背景圖片

background屬性小知識點:

background屬性同時同時包含background-repeat,background-position, background-color,background-attachment等屬性,所以我們在使用background屬性的時候,可以把其它屬性的值統統寫到background里面,這樣代碼更加的簡潔。

示例代碼:

body{
    background-color: #ccc;
    background-image: url('20190621232252.png');
    background-repeat: no-repeat;
    background-position-x: 20px;
    background-position-y: 50px;
}

等價代碼

body{
    background: #cccc url('20190621232252.png') no-repeat 20px 50px;
}

示例演示效果:

CSS背景圖片

通過上面的代碼可以看出,背景顏色,背景圖片,以及背景圖片的顯示方式,定位點等,都可以寫到 background 屬性里面。