需求:
图片放在div里,原来这种需求最先想到的就是定位,但是如果还有其他定位元素的时候,就很容易相互影响,所以这里尝试一下before伪类来实现
样式:
.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,那图片只能显示其中的一部分