0

我已经为此工作了一段时间，但我不明白为什么它不起作用。总之，它只是在左上角和右上角的图像上覆盖一个柔和的渐变。但是我无法让它工作。有任何想法吗？

<article class="main-home">
<div class="header">
    <div class="crumb">Placehold</div>
</div>

<div class="body">
    <img src="http://placehold.it/350x150" class="block_img"/>
</div>

而css也是

article.main-home
{
    overflow: hidden;
}
article.main-home .body .block_img
{
    float: left;
    width: 50%;
}
article.main-home .body .block_img:before 
{
    background-image: -moz-linear-gradient(left center , rgba(255, 0, 85, 0.2) 0px, rgba(255, 0, 85, 0) 25%);
    background-size: 100% auto;
    content: "";
    display: block;
    height: 100%;
    left: 0 !important;
    position: absolute;
    top: 0 !important;
    width: 100%;
}

我这里也有一个活跃的 jSFiddle：http: //jsfiddle.net/J4Dgm/4/ 谢谢一群人！

4

3 回答 3

3

<img>是我们无法应用:before:after的这些元素之一，并且由于<img>标签是自关闭的（换句话说，没有关闭标签），它没有内容

于 2013-06-08T11:41:48.193 回答
1

img 元素不支持伪元素

于 2013-06-08T11:48:39.630 回答
0

实际上，您还需要给出一个真实的高度。
父级中 100% 的没有高度给出 100% 的没有（级联/继承）。
给position:relative元素.body和
大小你absolute的伪元素.body： 

top:0;
left:0;
bottom:0;
right:0;
于 2013-06-08T11:55:47.117 回答