一、這一節講解的是背景圖片開始的位置也是可以設定的：
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大資料學習視頻禮包
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/53600.html
標籤：Html/Css
上一篇：HTML 媒體(Media)與多媒體、視頻、聲音格式
下一篇：[前端第一課]開發前的準備