我已经为此工作了一段时间,但我不明白为什么它不起作用。总之,它只是在左上角和右上角的图像上覆盖一个柔和的渐变。但是我无法让它工作。有任何想法吗?
<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/ 谢谢一群人!