。
我正在使用Chrome插件"Stylebot"来更改网站的设计。所以我必须用CSS处理所有事情。我无法更改 HTML 或添加任何 JS 代码。
我现在有以下HTML代码：
<img class="inlineimg" src="/designs/cyborg/misc/navbits_start.gif" alt="" border="0">
我希望该图像替换为带有背景和一些文本的div 容器。
我尝试了类似的东西：
img[class=inlineimg] {
visibility: hidden;
}
img[class=inlineimg]:before {
visibility: visible;
width: 90px;
height: 20px;
background: blue;
content: "Text";
}
我知道这是错误的，但我不知道如何做到这一点。
正如你所说，img 在 span 标签中，所以我建议使用 span:before .使用img:before不正确/无效。
注意：由 ：：before 和 ：：after 生成的伪元素包含在元素的格式框中，因此不适用于 替换的元素，如 或 到
元素。
$('span').each(function() {
if ($(this).find('>.inlineimg').length !== 0) {
$(this).addClass('imgSpan');
}
})body {
font: 13px Verdana;
}
span {
display: inline-block;
position: relative;
}
img[class=inlineimg] {
visibility: hidden;
}
span.imgSpan:before {
position: absolute;
top: 0;
width: 90px;
height: 20px;
background: blue;
color: #fff;
content: "Text";
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span><img class="inlineimg" src="http://via.placeholder.com/350x150" alt="" border="0"></span>
<p>-----------------------</p>
<p>without image</p>
<span style="padding:5px;width:100px;background:red;"></span>
<p>-----------------------</p>
<p>image not having <b>inlineimg</b> class inside span</p>
<span><img src="http://via.placeholder.com/350x150" alt="" border="0"></span>如果要在元素(或其他类(之后立即选择一个类，则可以使用以下格式： 元素>.class
这样：
img>.inlineimg { 可见性：隐藏; } img>.inlineimg：before { 可见性：可见; 宽度：90px; 高度：20px; 背景：蓝色; 内容："文本"; }来自 MDN ：：before (：before(：
由 ：：before 和 ：：after 生成的伪元素包含 元素的格式框，因此不适用于替换 元素，如
<img>或<br>元素。
您必须尝试找到另一个接近图像的元素才能实现您要做的事情。