是否:之前不工作的img元素?

我试图使用:before选择器将图像放在另一个图像上，但我发现它根本不能将图像放在img元素之前，只有一些其他元素。具体来说，我的风格是:

.container
{
   position: relative;
   display: block;
}

.overlay:before
{
    content: url(images/[someimage].png);
    position: absolute;
    left:-20px;
    top: -20px;
}

我发现这很有效:

<a href="[url]" class="container">
  <span class="overlay"/>
  <img width="200" src="[url]"/>
</a>

但这不是:

<a href="[url]" class="container">
  <img width="200" src="[url]" class="overlay"/>
</a>

我可以使用div或p元素来代替这个span，浏览器会正确地将我的图像覆盖到img元素中的图像上，但如果我将overlay类应用到img本身，它就不起作用了。

我想让它工作，因为这个额外的span冒犯了我，但更重要的是，我有大约100篇博客文章，我想修改，如果我可以修改样式表，我可以一次完成这一点，但如果我必须返回并在a和img元素之间添加一个额外的span元素，这将是更多的工作。

当前回答

只要给图像“position: relative”，它就可以工作了

2021-01-27 12:43:32

其他回答

<img>是一个替换的元素，如果图像加载失败，则在其上使用:before或:after伪元素，否则将不起作用。如果您打算在图像加载失败的情况下有一个后备方案，请参阅https://stackoverflow.com/a/71478688/14204452

2022-03-15 08:07:49

不幸的是，大多数浏览器不支持在img标记上使用:after或:before。

http://lildude.co.uk/after-css-property-for-img-tag

然而，你可以用JavaScript/jQuery来完成你所需要的。看看这把小提琴:

http://jsfiddle.net/xixonia/ahnGT/

$(function() {

    $('.target').after('<img src="..." />');

});

编辑:

对于不支持的原因，请查看coreyward的答案。

2011-04-30 16:21:57

before和after伪选择器不插入HTML元素——它们在目标元素的现有内容之前或之后插入文本。因为图像元素不包含文本，也没有后代，所以img:before或img:after都不会对您有任何好处。对于<br>和<hr>这样的元素也是如此，原因相同。

2011-04-30 16:36:52

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>

      #image img{
    display: inline-block;
    max-width: 50%;
    }

      #image::after {
    position: absolute;
    top: 0;
    content: url('https://img.icons8.com/plasticine/100/000000/about.png');
    }

    </style>
    <title>img before</title>
  </head>
  <body>
    <a id="image" href="">
    <img src="https://static.remove.bg/remove-bg-web/5c20d2ecc9ddb1b6c85540a333ec65e2c616dbbd/assets/start-1abfb4fe2980eabfbbaaa4365a0692539f7cd2725f324f904565a9a744f8e214.jpg">
    </a>
  </body>
</html>

2022-07-13 11:27:29

:after可用于显示映像的回退映像

请看下面的例子，前2个img标签指向损坏的url。但第二个显示的是后退图像，而不是浏览器默认的损坏logo。然而，我不确定这是否实用，我发现让它正确工作有点棘手。

img { position: relative; display: inline-block; width: 300px; height: 200px; vertical-align: top; } img:not(:first-child)::after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: "<" attr(alt) "> NOT FOUND"; border: 1px dashed #999; background: url(https://cdn.dribbble.com/users/1012566/screenshots/4187820/topic-2.jpg) center/100%; } <img src="https://source.unsplash.com/random/100/75" alt="logo"> <img src="https://source.unsplash.com/random/100/75" alt="logo"> <img src="https://source.unsplash.com/random/100x75" alt="logo">

2019-12-30 13:45:13

是否:之前不工作的img元素?

推荐文章

最新文章

标签