渐变叠加在背景颜色中没有很好地结束答案

【问题标题】：Gradient overlay doesn't end nicely in the background color渐变叠加在背景颜色中没有很好地结束
【发布时间】：2015-03-30 11:37:54
【问题描述】：

我正在使用指南针在图像上叠加渐变。但问题是我希望我的渐变结束得更强，这样图像就会淡入当前的背景颜色。

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

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

【问题讨论】：

A gradient generator, perhaps? - 特别是。纯白色 ~80% 而不是 100%
没关系，我已经搜索了更多，但目前的 css3 似乎不可能，除非您使用渐变蒙版（这不是跨浏览器友好的）。我会坚持在这部分使用 Photoshop 切片。

标签： css sass gradient linear-gradients compass

【解决方案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 上创建了一个小片段供您查看，我将其包装在一个容器中，以便在 Sass Meister 工具中更容易查看...

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

【讨论】：

【解决方案2】：

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

【讨论】：