040_CSS3背景
生活随笔
收集整理的這篇文章主要介紹了
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屬性應用于圖片。
總結
以上是生活随笔為你收集整理的040_CSS3背景的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 039_CSS3边框
- 下一篇： 041_CSS3文本效果