渐变叠加不会很好地结束背景颜色

Question

我正在使用指南针覆盖图像上的渐变。但问题是我希望我的渐变结束更强，以便图像渐变成当前的背景颜色。

这是我的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％白色结束我的渐变它应该淡入背景？

有人可以帮我解决这个问题，或者提供一个更好（更干净）的罗盘解决方案来完成这项工作吗？

Answer 1

好吧，所以我所做的，实际上是给你的&: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上创建了一点点tid，让你看看，我把它包装在一个容器中，这样就更容易在Sass Meister工具中查看...

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

Answer 2

为什么不将图像带入photoshop并将其淡化为纯色？在我看来，就像你在添加不需要的代码一样。但是，如果这不是一个选项，并且您必须使用CSS渐变，则可以始终通过用逗号分隔渐变来应用多个渐变，以使其进一步变暗，因为它已经以100％结束。