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

CSS

040_CSS3背景

發布時間：2025/4/17 CSS 79 豆豆

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

1. 多個背景圖像

1.1. CSS3允許您為元素使用多個背景圖像。不同的背景圖像用逗號隔開, 并且圖像會彼此堆疊, 其中的第一幅圖像最靠近觀看者。

1.2. 例子

1.2.1. 代碼

<!DOCTYPE html> <html><head><title>CSS3多個背景圖像</title><meta charset="utf-8"><style type="text/css">div {width: 530px;height: 480px;background-image: url(bg_flower.gif), url(bg_flower_2.gif);}</style></head><body><div></div></body> </html>

1.2.2. 效果圖

2. background-size屬性

2.1. background-size屬性規定背景圖像的尺寸。在CSS3之前, 背景圖片的尺寸是由圖片的實際尺寸決定的。

2.2. contain關鍵字將背景圖像縮放為盡可能大的尺寸(但其寬度和高度都必須適合內容區域)。這樣, 取決于背景圖像和背景定位區域的比例, 可能存在一些未被背景圖像覆蓋的背景區域。

2.3. cover關鍵字會縮放背景圖像, 以使內容區域完全被背景圖像覆蓋(其寬度和高度均等于或超過內容區域)。

2.4. 默認值

2.5. 可能值

2.6. 例子

2.6.1. 代碼

<!DOCTYPE html> <html><head><title>CSS3設置背景圖像的尺寸</title><meta charset="utf-8" /><style type="text/css">div {width: 212px;height: 320px;background: #FFF0F0 url('bg_flower.gif') no-repeat;/*background-repeat: no-repeat;background-size: auto 100%;*/margin: 10px;border: dashed 10px;float: left;}</style></head><body><div><p>這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。</p><p>這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。</p></div><div style="background-size: 159px 240px;"><p>這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。</p><p>這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。</p></div><div style="background-size: 75% 75%;"><p>這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。</p><p>這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。</p></div><div style="background-size: contain;"><p>這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。</p><p>這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。</p></div><div style="background-size: contain; padding: 30px;"><p>這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。</p><p>這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。</p></div><hr style="clear: left;" /><div style="background-size: contain; padding: 30px; background-origin: border-box;"><p>這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。</p><p>這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。</p></div><div style="background-size: cover;"><p>這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。</p><p>這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。</p></div><div style="background-size: cover; padding: 30px;"><p>這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。</p><p>這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。</p></div><div style="background-size: cover; padding: 30px; background-origin: border-box;"><p>這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。這是第一個段落。</p><p>這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。這是第二個段落。</p></div></body> </html>

2.6.2. 效果圖

3. background-origin屬性

3.1. background-origin屬性規定background-position屬性相對于什么位置來定位。

3.2. 如果背景圖像的background-attachment屬性為"fixed", 則該屬性沒有效果。

3.3. 默認值

3.4. 可能值

3.5. 例子

3.5.1. 代碼

<!DOCTYPE html> <html><head><title>CSS3對背景圖像定位</title><meta charset="utf-8" /><style type="text/css">div {border: dashed 10px black;padding: 60px;background-image: url('bg_flower.gif');background-repeat: no-repeat;background-position: left;background-size: auto 100%;}#div1 {background-origin: border-box;}#div2 {background-origin: content-box;}</style></head><body><p>background-origin:padding-box; 默認值</p><div>這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。</div><p>background-origin:border-box;</p><div id="div1">這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。</div><p>background-origin:content-box;</p><div id="div2">這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。</div></body> </html>

3.5.2. 效果圖

4.?background-clip屬性

4.1. background-clip屬性規定背景的繪制區域。

4.2. 默認值

4.3. 可能值

4.4. 例子

4.4.1. 代碼

<!DOCTYPE html> <html><head><title>CSS3規定背景的繪制區域</title><meta charset="utf-8" /><style type="text/css">div {width: 200px;height: 200px;margin: 30px;padding: 50px;background-color: yellow;border: 10px dashed #92b901;float: left;}#div1 {background-clip: border-box;}#div2 {background-clip: padding-box;}#div3 {background-clip: content-box;}</style></head><body><div id="div1">這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。</div><div id="div2">這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。</div><div id="div3">這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。</div></body> </html>

4.4.2. 效果圖

5. 背景屬性的應用

5.1. 應用于純色的背景屬性:

background-color屬性應用于純色。
background-clip屬性應用于純色。

5.2. 應用于圖片的背景屬性:

background-imgage屬性應用于圖片。
background-size屬性應用于圖片。
background-repeat屬性應用于圖片。
background-position屬性應用于圖片。
background-origin屬性應用于圖片。
background-attachment屬性應用于圖片。

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

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

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

背景