是否:之前不工作的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元素，这将是更多的工作。

当前回答

这个对我很有用:

html

<ul>
    <li> name here </li>
</ul>

CSS

ul li::before {
    content: url(../images/check.png);
}

2019-02-05 08:50:10

其他回答

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

2022-03-15 08:07:49

这个对我很有用:

html

<ul>
    <li> name here </li>
</ul>

CSS

ul li::before {
    content: url(../images/check.png);
}

2019-02-05 08:50:10

下面是另一个img使用div容器的解决方案，同时使用:hover::after来达到效果。

HTML如下:

<div id=img_container><img src='' style='height:300px; width:300px;'></img></div>

CSS如下:

#img_container { 
    margin:0; 
    position:relative; 
} 

#img_container:hover::after { 
    content:''; 
    display:block; 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:url(''); 
    z-index:1; 
    top:0;
}

要查看它的操作，请检查我创建的小提琴。只是为了让你知道这是跨浏览器友好的，没有必要用“假内容”欺骗代码。

2013-12-18 09:00:57

在前一个元素上尝试::。

2019-02-24 02:49:19

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

2021-01-27 12:43:32

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

推荐文章

最新文章

标签