CSS實現背景圖像重複效果的方法:先建立HTML範例檔案並輸入基礎程式碼;然後透過「background-image: url(img/154e.png);background-repeat: repeat;」屬性實現背景影像重複效果即可。
本文操作環境:Windows7系統、Dell G3電腦、HTML5&&CSS3版。
背景圖片重複效果,相信大家都有在各大網站上看過。一個好看的背景圖片重複效果,可以讓我們的網頁樣式更美觀,內容更豐富。我們可以透過CSS中background的相關屬性來實現這種效果。
下面我們就透過簡單的程式碼範例,跟大家介紹css實現背景圖片重複的效果。
程式碼範例如下:
<!DOCTYPE> <html> <meta charset="utf-8"> <head> <title></title> <style type="text/css"> body{ background-image: url(img/154e.png); background-repeat: repeat; } </style> </head> <body> </body> </html>
這裡我們使用的單張圖片如下:
那麼背景圖片重複的效果最終如下圖(部分截圖):
相關屬性介紹:
background-image 屬性可以為元素設定背景圖像。元素的背景佔據了元素的全部尺寸,包括內邊距和邊框,但不包括外邊距。
background-repeat 屬性設定是否及如何重複背景圖片。
附註:預設情況下,背景圖像位於元素的左上角,並在水平和垂直方向上重複。
推薦參考:《CSS教學》
這篇文章就是關於css實作背景圖片重複的效果方法介紹,也是非常簡單的,希望對需要的朋友有所幫助!
以上是CSS如何實現背景圖片重複效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!