before僞類插入圖片

需求：

圖片放在div裏，原來這種需求最早想到的就是定位，可是若是還有其餘定位元素的時候，就很容易相互影響，因此這裏嘗試一下before僞類來實現

<div class="box">
    <!--<img class="prizeBg doorImg1" src="doorImg1.png"/>-->
</div>

　　

樣式：

　　　　.box{
            width:300px;
            height:44px;
            border:1px solid #000;
            position:relative;
        }
        .box:before{
            content:"";
            background:url("doorImg2.png") no-repeat;
            background-size: 19px 24px;
            width:19px;
            height:24px;
            position:absolute;
            left:20px;
            top:25%;
        }

　　效果就出來了，這樣的話，移動div的位置img也會跟着移動， 不用再單獨調整img的定位值

這裏須要注意的點就是

由於直接用content不能控制圖片大小，因此把圖片變成背景圖片，而後用background-size就能控制圖片大小了。這裏width:30px;height:30px;也是必要的，否則圖片也是不能顯示出來，由於content爲空就至關於沒有寬度，背景圖片是不能被渲染出來的。display：inline-block能夠換成block，不過效果的話圖片就會跑到下一行，但不能沒有這個display樣式。（我這裏沒有寫也沒有發現有什麼問題）還有background-size不要不寫，若是不明確background-size，但又保留了width和height，那圖片只能顯示其中的一部分