css - 渐变叠加的背景色效果不佳

我正在使用罗盘在图像上叠加渐变。但是问题是我希望我的渐变效果更强，以使图像逐渐淡入当前背景色。

这是我的scss：

.hero {
    width: 100%;
    height: 500px;
    background: url('../images/MacBookAir.jpg') center center no-repeat;
    @include background-size(cover);

    &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,1));
    }
}

html就是：

<div class="row hero"></div>

很难看到，因为这里的背景也是白色的，但我猜是因为我要以100％白色结束渐变，它应该淡入背景？

有人可以帮我解决这个问题，或者在指南针中提供更好（更清洁）的解决方案来完成此工作吗？

最佳答案

好吧，我所做的就是实际上给您的&:before一个高度，以便它知道应该走多高，尽管这可能不是最敏感的选择，但它确实有效。

所以您的Sass看起来像这样：

.hero {
    width: 100%;
    height: 500px;
    background: url('http://placesheen.com/1200/500') center center no-repeat;
    background-size:cover;

&:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 508px;
    background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,1));
    }
}

前一个未达到最大高度，因此需要再扩展8个像素，即508px。您可能还可以使用百分比来达到相同的效果。

我在Sass Meister上创建了一个小提示供您查看，我将其包裹在一个容器中，以便在Sass Meister工具中更容易查看...

http://sassmeister.com/gist/3528cb23d3e831231949

关于css - 渐变叠加的背景色效果不佳，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29345226/