是：之前不工作的img元素？ [英] Does :before not work on img elements?

问题描述

我试图使用：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 =200src =[url]/> 
< / a> 
  

但不包括：

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

我可以使用 div c $ c> p 元素而不是 span ，浏览器正确地覆盖了我的图像在 img 元素，但如果我将覆盖类应用于 img 本身，它不工作。

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

解决方案

不幸的是，大多数浏览器不支持使用： code>：before on img标签。

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

但是，你可以使用JavaScript / jQuery来完成你所需要的。查看这个小提琴：

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

  $（function（）{
 
 $（'target'） .after（'< img src =.../>'）; 
 
}）; 
    ：
 $ 
 b 
 $ b 
有关不支持此操作的原因，请查看 coryward的回答。 / p> 
I'm trying to use the :before selector to place an image over another image, but I'm finding that it simply doesn't work to place an image before an img element, only some other element.  Specifically, my styles are:
.container
{
   position: relative;
   display: block;
}

.overlay:before
{
    content: url(images/[someimage].png);
    position: absolute;
    left:-20px;
    top: -20px;
}
and I find that this works fine:
<a href="[url]" class="container">
  <span class="overlay"/>
  <img width="200" src="[url]"/>
</a>
but this does not:
<a href="[url]" class="container">
  <img width="200" src="[url]" class="overlay"/>
</a>
I can use a div or p element instead of that span, and the browser correctly overlays my image over the image in the img element, but if I apply the overlay class to the img itself, it doesn't work.

I'd like to get this working because that extra span offends me, but more importantly, I've got about 100 blog posts that I'd like to modify, and I can do this in one go if I could just modify the stylesheet, but if I have to go back and add an extra span element in between the a and img elements, this will be a lot more work.  
解决方案
Unfortunately, most browsers do not support using :after or :before on img tags. 

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

However, it IS possible for you to accomplish what you need with JavaScript/jQuery. Check out this fiddle:

http://jsfiddle.net/xixonia/ahnGT/
$(function() {

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

});
Edit:

For the reason why this isn't supported, check out coryward's answer.

                        
这篇关于是：之前不工作的img元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！