當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS添加多个背景图片

發布時間：2025/3/20 CSS 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS添加多个背景图片小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS添加多個背景圖片

? ? ? ? ? 如果給頁面添加多個背景，但是，在CSS中一個標記只能用一次background屬性。

? ? ? ? ??因此，只有給多個標記添加不同背景來實現，比如，在body標記設置了背景圖片的基礎上，可以再添加table和div等標記，來設置其他的背景圖。

<span style="font-size:24px;"><html><head><title>多個背景圖片</title><style></style></head><body><div><h1>銀杏的優點</h1>1、葉色秀雅，花色清淡。<br>2、樹體高大，壽命綿長，樹粗可達4米，壽命可達3000年之多。樹長與古老寺廟相匹配，以名山大川、風景名勝為伴。<br>3、樹干光潔，愈傷力強，輕微的損傷很快便可愈合。<br>4、發芽晚落葉早，有利于早春和晚秋樹下能及時得到暖和的陽光。<br>……</div></div></body> </html> </span> ? ? ? ? ??Body標記設置了大背景圖片，正文的div標記，設置了在豎直方向上重復的小圖片。

? ? ? ? ??除了這兩個標記，HTML中幾乎所有的標記都可以設置背景，很多頁面的各種效果，都是通過設置不同標記的不同背景實現的。

? ? ? ? ??背景樣式綜合設置

? ? ? ? ??和border、font屬性一樣，background也可以將各種設置集成到一個語句上，不僅可以節省代碼，而且加快了網絡下載頁面的速度。

<span style="font-size:24px;">background-color:blue; background-image:url(); background-repeat:no-repeat; background-attachment:fixed; background-position:5px 10px;</span>

? ? ? ? ??寫為一句代碼

<span style="font-size:24px;">background:blue url() no-repeat fixed 5px 10px;</span>

? ? ? ? ??兩種方式在顯示上是完全一樣的，第一種代碼長了一些，但是可讀性會好點。

總結

以上是生活随笔為你收集整理的CSS添加多个背景图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。