首頁 >web前端 >css教學 >CSS如何實現背景圖片重複效果

CSS如何實現背景圖片重複效果

藏色散人
藏色散人原創
2018-11-30 17:36:126955瀏覽

CSS實現背景圖像重複效果的方法:先建立HTML範例檔案並輸入基礎程式碼;然後透過「background-image: url(img/154e.png);background-repeat: repeat;」屬性實現背景影像重複效果即可。

CSS如何實現背景圖片重複效果

本文操作環境: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>

這裡我們使用的單張圖片如下:

CSS如何實現背景圖片重複效果

那麼背景圖片重複的效果最終如下圖(部分截圖):

CSS如何實現背景圖片重複效果

相關屬性介紹:

background-image 屬性可以為元素設定背景圖像。元素的背景佔據了元素的全部尺寸,包括內邊距和邊框,但不包括外邊距。

background-repeat 屬性設定是否及如何重複背景圖片。

附註:預設情況下,背景圖像位於元素的左上角,並在水平和垂直方向上重複。

推薦參考:《CSS教學

這篇文章就是關於css實作背景圖片重複的效果方法介紹,也是非常簡單的,希望對需要的朋友有所幫助!

以上是CSS如何實現背景圖片重複效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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