一、這一節講解的是背景圖片開始的位置也是可以設置的: background-orgin:數值值; 這裡的屬性值就是開始的位置,可分為: padding-left(預設);content-box;border-box <style> *{ margin:0; padding;0; } ul li{ l ...
一、這一節講解的是背景圖片開始的位置也是可以設置的:
background-orgin:數值值;
這裡的屬性值就是開始的位置,可分為:
padding-left(預設);content-box;border-box <style> *{ margin:0; padding;0; } ul li{ list-style: none; float:left; width: 200px; height: 200px; text-align:center; line-height:100px; border:10px dashed black; margin-left: 20px; background:url("image/mountain.jpg") no-repeat; } ul li:nth-child(2){ background-origin: padding-box;/*背景圖片預設從什麼區域開始顯示,預設就是從padding區域開始顯示*/ } ul li:nth-child(3){ background-origin: border-box; } ul li:nth-child(4){ background-origin: content-box; } ...............省略代碼............ <ul> <li>預設</li> <li>padding</li> <li>border</li> <li>content</li>
二、背景繪製區域屬性
與剛纔的背景圖片繪製區域定位類似,我們只需要修改一個屬性就可以達到定位背景顏色的目的
backgroud-clip:數值值;
這裡的屬性值就是開始的位置,可分為:
padding-left(預設);content-box;border-box <style> *{ margin:0; padding;0; } ul li{ list-style: none; float:left; width: 200px; height: 200px; text-align:center; line-height:200px; border:10px dashed black; margin-left: 20px; background:url("image/mountain.jpg") no-repeat; background-color:red; } ul li:nth-child(2){ background-origin: padding-box;/*背景圖片預設從什麼區域開始顯示,預設就是從padding區域開始顯示*/ background-clip:padding-box;/*背景繪製區域的屬性是專門用於制定從哪個區域開始繪製背景的,預設情況下就是從 border區域開始繪製*/ } ul li:nth-child(3){ background-origin: border-box; background-clip:border-box; } ul li:nth-child(4){ background-origin: content-box; background-clip:content-box; } </style> </head> <body> <ul> <li>預設</li> <li>padding</li> <li>border</li> <li>content</li> </ul>
三、源碼:
D190_BackgroundImageLocation.html
D191_BackgroudDrawingAttribute.html
D192_MoreBackgroundImage.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D190_BackgroundImageLocation.html
https://github.com/ruigege66/HTML_learning/blob/master/D191_BackgroudDrawingAttribute.html
https://github.com/ruigege66/HTML_learning/blob/master/D192_MoreBackgroundImage.html
2.CSDN:https://blog.csdn.net/weixin_44630050
3.博客園:https://www.cnblogs.com/ruigege0000/
4.歡迎關註微信公眾號:傅里葉變換,個人賬號,僅用於技術交流,後臺回覆“禮包”獲取Java大數據學習視頻禮包