渐变叠加在背景颜色中效果不佳

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

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

Answer 1

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

Answer 2

好吧，我所做的实际上是给你的 &: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

渐变叠加在背景颜色中效果不佳

Gradient overlay doesn't end nicely in the background color

css

sass

gradient

linear-gradients

compass