是:在不使用img元素之前？

Question

我正在尝试使用: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元素中的图像上,但是如果我将叠加类应用于它img自身,则它不起作用.

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

Answer 1

不幸的是,大多数浏览器不支持使用:after或:before使用img标签.

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

但是,您可以通过JavaScript/jQuery完成所需的工作.看看这个小提琴:

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

$(function() {

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

});

编辑:

由于不支持此原因,请查看coreyward的答案.

Answer 2

前后伪选择器不插入HTML元素 - 它们在目标元素的现有内容之前或之后插入文本.由于图像元素不包含文本或有后代,既不img:before或者img:after将你带来任何好处.这也是相同的元件的情况下<br>和<hr>出于同样的原因.

Answer 3

我找到了一种方法来使这个工作在纯CSS中:

在我只是假的内容 -方法

一个纯CSS方法来启用img:after.

您可以查看CodePen:我只是虚假内容或查看源代码.

来源和片段

img {
    /* hide the default image */
    height:0;
    width:0;

    /* hide fake content */
    font-size:0;
    color:transparent;

    /* enable absolute position for pseudo elements */
    position:relative;

    /* and this is just fake content */
    content:"I'm just fake content";
}

/* initial absolute position */
img:before,
img:after {
    position:absolute;
    top:0;
    left:0;    
}

/* img:before - chrome & others */
img:before {
    content:url(http://placekitten.com/g/250/250);
}

/* img:before - firefox */
body:not(:-moz-handler-blocked) img:before {
    padding:125px;
    background:url(http://placekitten.com/g/250/250) no-repeat;
}

/* img:after */
img:after {
    /* width of img:before */
    left:250px;

    content:url(http://lorempixel.com/350/200/city/1);
}

<img
    alt="You are watching the ~ I'm just fake content ~ method"  
/>

浏览器支持

✓Chrome10+

✓Firefox11+

✓Opera9.8+

✓Safari

没有支持

⊗InternetExplorer 8/9

请在其他浏览器中测试

Answer 4

这是另一种解决方案，使用 div 容器作为 img，同时使用: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;
} 

要查看它的实际效果，请查看我创建的小提琴。只是为了让您知道这是跨浏览器友好的，并且无需使用“虚假内容”来欺骗代码。

Answer 5

由于<img>被替换元素的性质，文档样式不会对其产生影响。

无论如何要引用它，<picture>提供了一个理想的本地包装器，可以在其上附加伪元素，如下所示：

img:after, picture:after{
    content:"\1F63B";
    font-size:larger;
    margin:-1em;
}

<img src="//placekitten.com/110/80">

<picture>
    <img src="//placekitten.com/110/80">
</picture>