這次帶給大家HTML與CSS中背景相關屬性，使用HTML與CSS中背景相關屬性的注意事項有哪些，以下就是實戰案例，一起來看一下。
一. 背景尺寸屬性
1.什麼是背景尺寸屬性
背景尺寸屬性是CSS3中新增的一個屬性, 專門用於設定背景圖片大小
background-size:xxxx;
取值:
1.具体像素 >> background-size:200px 100px; 2.百分比 >> background-size:100% 80%; 3.宽度等比拉伸 >> background-size:auto 100px; 4.高度等比拉伸 >> background-size:100px auto; 5.cover >> background-size:cover;
5.1告訴系統圖片需要等比拉伸
5.2告訴系統圖片需要拉伸到寬度和高度都填滿元素
6. contain >> background-size:contain;
6.1告訴系統圖片需要等比拉伸
6.2告訴系統圖片需要拉伸到寬度或高度都填滿元素(只保證一邊填滿)
background-size
二. 背景圖片定位區域屬性
#background-origin : 告訴系統背景圖片從什麼區域開始顯示,預設就是從padding區域開始顯示;
取值:
1.<a>padding-box</a>:默认值 >>background-origin: padding-box; 告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示; 2.<a>border-box</a> >> background-origin:border-box; 从border位置开始 3.<a>content-box</a> >> background-origin:content-box;从content位置开始
<html lang="en"> <head> <meta charset="UTF-8"> <title>113-背景图片定位区域属性</title> <style> *{ margin: 0; padding: 0; } ul li{ list-style: none; float: left; width: 100px; height: 100px; text-align: center; line-height: 100px; border: 20px dashed #000; padding: 50px; margin-left: 20px; background: url("images/dog.jpg") no-repeat; } ul li:nth-child(2){ /* 告诉系统背景图片从什么区域开始显示, 默认情况下就是从padding区域开始显示 */ background-origin: padding-box; } ul li:nth-child(3){ background-origin:border-box; } ul li:nth-child(4){ background-origin:content-box; } </style> </head> <body> <ul> <li>默认</li> <li>padding</li> <li>border</li> <li>content</li> </ul> </body> </html> 背景圖片定位區域屬性
#三.背景繪製區域屬性
<a>background-clip:xxx;</a>背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景
<html lang="en"> <head> <meta charset="UTF-8"> <title>114-背景绘制区域属性</title> <style> *{ margin: 0; padding: 0; } ul li{ list-style: none; float: left; width: 100px; height: 100px; text-align: center; line-height: 100px; border: 20px dashed #000; padding: 50px; margin-left: 20px; background: red url("images/dog.jpg") no-repeat; } ul li:nth-child(2){ /* 背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景 */ background-clip: padding-box; } ul li:nth-child(3){ background-clip: border-box; } ul li:nth-child(4){ background-clip: content-box; } </style> </head> <body> <ul> <li>默认</li> <li>padding</li> <li>border</li> <li>content</li> </ul> </body> </html> 背景繪製區域屬性(紅色為繪製區域)
四.多重背景圖片
元素c3之後可以設定多張背景圖片
多張背景圖片之間用逗號隔開即可
background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom;注意點:
先新增的背景圖片會蓋住後新增的背景圖片
rrreee建議在編寫多重背景時拆開編寫
background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom,url("images/animal4.png") no-repeat right bottom,url("images/animal5.png") no-repeat center center;完整程式碼如下:
background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png"); background-repeat: no-repeat, no-repeat, no-repeat; background-position: left top, right top, left bottom;
多重背景圖片
四.多重背景圖片聯絡
115-多重背景图片
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是HTML與CSS中背景相關屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
