文章/答案/技术大牛

发布

社区首页 >问答首页 >将<img>替换为<div>

问将<img>替换为<div>
EN

Stack Overflow用户

提问于 2018-01-07 16:07:32

回答 2查看 765关注 0票数 0

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

我知道这是错误的，但我不知道如何才能做到这一点。

image

replace

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-01-07 17:41:24

正如您所说的，img位于span标记span:before.中，因此我建议使用使用img:before是不正确的/有效的。

元素。

$('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>

票数 1

Stack Overflow用户

发布于 2018-01-07 17:31:58

来自MDN：：MDN(：MDN)

前和::after生成的伪元素包含在元素的格式框中，因此不适用于替换的元素，如<img>，也不适用于<br>元素。

为了达到你想要做的事情，你必须尝试找到另一个接近图像的元素。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48138985

复制

相似问题

问将<img>替换为<div>
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将<img>替换为<div>EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将<img>替换为<div>
EN