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

Question

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

这是我的 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

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