首頁 > 文章 > web前端 > css如何設定圖片不重複

css如何設定圖片不重複

醉折花枝作酒筹原創: 2021-04-15 16:34:495618瀏覽

css可以使用「background-repeat」屬性設定圖片不重複，語法「background-repeat:no-repeat」；此屬性設定是否及如何重複背景影像，當值為「no-repeat」時，表示背景影像僅顯示一次。

css如何設定圖片不重複

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

background-repeat 屬性介紹：

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

從原始影像開始重複，原始影像由 background-image 定義，並根據 background-position 的值放置。

屬性值：

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

範例：

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

}
</style>
</head>
<body>
</body>
</html>

效果圖：

css如何設定圖片不重複

css設定圖片不重複

<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如何設定圖片不重複

#推薦學習：css影片教學

以上是css如何設定圖片不重複的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

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

上一篇：css如何設定背景下一篇：css如何設定背景

看更多