我在遗留应用程序周围有数百个图标:
<img class="date-picker" src="/image/datepicker.png">
以下 CSS 删除了 datepicker.png 但不显示 font Awesome 图标
.date-picker {
background-image: none;
}
.date-picker:after{
font-family: FontAwesome;
content: "\f073";
color:grey;
font-size:25px;
}
有没有办法在不更改 IMG 标签的情况下实现这一目标?
伪元素仅适用于以下图像src
属性加载失败。如果图像成功加载,则不会使用伪元素。
您可以做的一件事是将其应用于父元素,但这显然取决于您的标记:
div {
height: 100px;
width: 100px;
position: relative;
}
div img {
display: none;
}
div::after {
content: 'foo';
position: absolute;
top: 0;
}
<div>
<img src="http://placehold.it/100x100" />
</div>
在这里我们隐藏了img
元素并将伪元素应用于div
容器,然后绝对定位伪元素以使其位于容器内部(或者顶部)div
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)