首頁 > 文章 > web前端 > css怎麼讓背景圖片不重複

css怎麼讓背景圖片不重複

青灯夜游原創: 2020-12-23 11:28:586640瀏覽

在css中，可以使用background-repeat屬性來讓背景圖片不重複，該屬性可以設定背景圖片是否重複以及如何重複；只需給背景圖片設定「background-repeat:no-repeat; ”樣式即可讓背景圖片不重複。

css怎麼讓背景圖片不重複

本教學操作環境：Windows7系統、HTML5&&CSS3版本，Dell G3電腦。

推薦：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(&#39;2019062123225css怎麼讓背景圖片不重複&#39;);
    }
    </style>
</head>
<!--飞鸟慕鱼博客-->
<body>
</body>
</html>

執行程式碼我們發現，背景圖片無論是橫向或縱向都是重複，直至鋪滿整個顯示區域。

css怎麼讓背景圖片不重複

CSS background-repeat 屬性

CSS中有個background-repeat 屬性，可以設定圖片背景圖片是否重複以及如何重複，它的預設值是橫向和縱向都會重複，如果不設定此屬性的值，那麼背景圖片就如上面的範例程式碼一樣，會橫向以及縱向同時重複，並鋪滿整個要顯示的區域。

它有三個可以設定的值，分別如下，其中 repeat 值為預設。

repeat ：預設。背景影像將在垂直方向和水平方向重複。
repeat-x ：背景影像將在水平方向重複。
repeat-y ：背景影像將在垂直方向重複。
no-repeat ：背景圖片將只顯示一次。
inherit ：規定應該從父元素繼承 background-repeat 屬性的設定。

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

#CSS程式碼：

body{
    background: url(&#39;2019062123225css怎麼讓背景圖片不重複&#39;);
    background-repeat:repeat-x;
}

運行結果如下圖，背景圖片都是水平方向重複的

css怎麼讓背景圖片不重複

css背景圖片縱向重複

CSS程式碼

body{
    background: url(&#39;2019062123225css怎麼讓背景圖片不重複&#39;);
    background-repeat:repeat-y;
}

運行結果如下圖，背景圖片都是縱向重複

css怎麼讓背景圖片不重複

css背景圖片不重複

CSS程式碼

body{
    background: url(&#39;2019062123225css怎麼讓背景圖片不重複&#39;);
    background-repeat:no-repeat;
}

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

css怎麼讓背景圖片不重複

#更多程式相關知識，請造訪：程式設計教學！！

以上是css怎麼讓背景圖片不重複的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：引入的css圖片怎麼載入不了下一篇：引入的css圖片怎麼載入不了

看更多