css圖片不重複的設定方法:先建立一個HTML範例檔案;然後引入一張背景圖片;最後透過設定屬性為「background-repeat:no-repeat」來實現圖片不重複即可。
本文操作環境: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設定圖片不重複
<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 影像不重複怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章!