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，那圖片只能顯示其中的一部分