CSS如何實現背景圖片重複效果
- 藏色散人原創
- 2018-11-30 17:36:126823瀏覽
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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn