HTML連載79-背景圖片定位區域屬性、背景顏色

soug發表於2020-04-01

一、這一節講解的是背景圖片開始的位置也是可以設定的:

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>


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69966782/viewspace-2683893/,如需轉載,請註明出處,否則將追究法律責任。

相關文章