溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css中背景圖片開始的位置怎么設置”，在日常操作中，相信很多人在css中背景圖片開始的位置怎么設置問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css中背景圖片開始的位置怎么設置”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
一、這一節講解的是背景圖片開始的位置也是可以設置的：
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>到此，關于“css中背景圖片開始的位置怎么設置”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
