Question

我一直在研究这个问题，我无法理解为什么它不起作用。总之，它意味着在左上方和右上方的图像上叠加一个软渐变。但是我无法让它发挥作用。有什么想法吗？

<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/ 谢谢一群人！

Answer 1

<img>是由于<img>标记自动关闭而导致we can't apply :before and :after because it has no content的其中一个元素（换句话说，没有结束标记）

Answer 2

img元素不支持伪元素

Answer 3

实际上，你需要给出一个真正的高度父母100％没有身高100％没有（级联/继承）将position:relative提供给元素.body和
在absolute上调整.body伪元素的大小：

top:0;
left:0;
bottom:0;
right:0;

：在不对图像应用渐变之前？

3 个答案: