首頁 >web前端 >前端問答 >css 影像不重複怎麼設定

css 影像不重複怎麼設定

藏色散人
藏色散人原創
2021-02-24 11:38:133014瀏覽

css圖片不重複的設定方法:先建立一個HTML範例檔案;然後引入一張背景圖片;最後透過設定屬性為「background-repeat:no-repeat」來實現圖片不重複即可。

css 影像不重複怎麼設定

本文操作環境:Windows7系統、HTML5&&CSS3、Dell G3電腦。

css可以使用background-repeat屬性設定圖片不重複,background-repeat屬性設定是否及如何重複背景圖片。預設地,背景圖像在水平和垂直方向上重複。

background-repeat 屬性介紹:

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

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

屬性值:

repeat 預設。背景影像將在垂直方向和水平方向重複。

repeat-x 背景影像將在水平方向重複。

repeat-y 背景影像將在垂直方向重複。

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

inherit 規定應該從父元素繼承 background-repeat 屬性的設定。

【推薦:css影片教學

範例:

<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 影像不重複怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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