css 圖像不重復(fù)的設(shè)置方法

發(fā)布時(shí)間：2021-02-24 11:42:32 來(lái)源：億速云閱讀：198 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹css 圖像不重復(fù)的設(shè)置方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

css圖像不重復(fù)的設(shè)置方法：首先創(chuàng)建一個(gè)HTML示例文件；然后引入一張背景圖片；最后通過(guò)設(shè)置屬性為“background-repeat:no-repeat”來(lái)實(shí)現(xiàn)圖像不重復(fù)即可。

css可以使用background-repeat屬性設(shè)置圖片不重復(fù)，background-repeat屬性設(shè)置是否及如何重復(fù)背景圖像。默認(rèn)地，背景圖像在水平和垂直方向上重復(fù)。

background-repeat 屬性介紹：

background-repeat 屬性定義了圖像的平鋪模式。

從原圖像開(kāi)始重復(fù)，原圖像由 background-image 定義，并根據(jù) background-position 的值放置。

屬性值：

repeat 默認(rèn)。背景圖像將在垂直方向和水平方向重復(fù)。

repeat-x 背景圖像將在水平方向重復(fù)。

repeat-y 背景圖像將在垂直方向重復(fù)。

no-repeat 背景圖像將僅顯示一次。

inherit 規(guī)定應(yīng)該從父元素繼承 background-repeat 屬性的設(shè)置。

示例：

<html>
<head>
<style type="text/css">
body
{ 
background-image: 
url(/i/eg_bg_03.gif);
}
</style>
</head>
<body>
</body>
</html>

效果圖：

css 圖像不重復(fù)的設(shè)置方法

css設(shè)置圖片不重復(fù)

<html>
<head>
<style type="text/css">
body
{ 
background-image: 
url(/i/eg_bg_03.gif);
background-repeat: no-repeat
}
</style>
</head>
<body>
</body>
</html>

效果圖：

css 圖像不重復(fù)的設(shè)置方法

以上是“css 圖像不重復(fù)的設(shè)置方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

css 圖像不重復(fù)的設(shè)置方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽