欢迎光临万书涛的个人博客

css中before伪元素background不显示的解决办法

作者:万书涛  / 日期:2020-04-14 20:49:56 /  来源:本站原创 /   浏览:
摘要
在css代码里,before和after伪元素我们经常用,它能够在一个元素之前和之后插入内容,方便我们页面布局,那么before应用了background背景图片后,却显示不出来是怎么回事呢  
让我们先来看一段代码,这是正确的能够显示before伪元素的写法,然后在说注意事项,代码如下:
 
.rcon .zztj p:before{content: '';
    position: absolute;
    background: url(../images/contb.png) no-repeat;
    width: 12px;
    height: 15px;
    margin: 2px;
left: 0; background-size:contain}

如上面的代码"background: url(../images/contb.png) no-repeat;",表示在p:before里加上了背景图片,这里要注意几个重要设置才能正确显示出来背景图片:
1. content: ' ',这个是before元素必须首先设置的,无论写在哪里都要设置,否则before标签就不起作用。
2. position: absolute,这个一定要设置好绝对定位,否则就显示不出来。
3. background-size:contain,这个是调整图片尺寸的,也要设置,要不我们图片放大缩小就不太好用 。

最终效果如下,最左边的黄色小图标显示出来了。
所属分类: 暂无分类
微信二维码

扫描关注微信公众号
第一时间获取最新资讯
本文由万书涛原创,地址:https://www.wtaoblog.com/grbkjc/21.html
如需转载,须以文字形式注明本文地址,否则禁止转载

猜你喜欢

无相关信息