before伪类插入图片

最新推荐文章于 2023-11-15 08:30:23 发布

weixin_33739523

最新推荐文章于 2023-11-15 08:30:23 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ly-qingqiu/p/11097163.html

本文介绍了一种使用CSS的:before伪类替代传统定位方式，实现图片在div中的精准定位的方法。通过将图片作为背景图片，并利用background-size属性控制大小，避免了与其他定位元素的冲突，使图片能够跟随div移动而自动调整位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

图片放在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，那图片只能显示其中的一部分

转载于:https://www.cnblogs.com/ly-qingqiu/p/11097163.html