Question

我正在使用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";
}

我知道这是错的，但我不知道如何才能实现这一目标。

Answer 1

正如你所说 img是一个范围标记 ，所以我建议使用 span:before 。使用 img:before 不正确/有效。

<强> Note: The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as , or to
elements.

＆＃13;

$('span').each(function() {
  if ($(this).find('>.inlineimg').length !== 0) {
    $(this).addClass('imgSpan');
  }
})

＆＃13;

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";
}

＆＃13;

<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>

＆＃13;

Answer 2

如果要在元素（或其他类）之后立即选择类，可以使用以下格式：   组件＆gt;的.class
   像这样：


    img>.inlineimg {
         visibility: hidden;
    }

    img>.inlineimg:before {
           visibility: visible;
           width: 90px;
           height: 20px;
           background: blue;
           content: "Text";
    }

Answer 3

来自MDN ::before (:before)：

由:: before和:: after生成的伪元素包含在元素的格式框，因此不适用于替换 <img>或<br>元素等元素。

您必须尝试找到靠近图像的另一个元素才能实现您的目标。

将<img/>替换为<div>

3 个答案: