Question

我正在尝试制作一个div，背景颜色在左侧，顶部和底部消失。我希望div从左到右从#FFF到#CCC均匀地淡出，并在顶部和底部#FFF或30px淡出到10%。

要做到这一点，我似乎需要对渐变进行分层。我试过radial gradients，但它们似乎只提供圆圈和省略号，这不是我想要的。我正在寻找线性淡化。

所以，我尝试使用before元素分层渐变，由于某种原因，顶部渐变似乎没有覆盖底部渐变。

div::before {
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(204,204,204,0.5) 10%,rgba(204,204,204,0.5) 90%,rgba(255,255,255,1) 100%);
}

div {
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(204,204,204,1) 100%);
}

Answer 1

这是解决问题的另一种方法。我不知道天气它比渐变更好，但至少你会知道这个选项。

http://jsfiddle.net/6os0epu6/1/

在这里，我使用了背景颜色，并用带有偏移的框阴影（或“内部发光”）包围它。

box-shadow:         inset 50px 0 60px rgba(255,255,255,0.5);

这只是一个演示，所以我没有追踪你写的特定颜色和像素。

注意： IE8需要额外的css代码，不在此示例中。

Answer 2

好的，所以这并不完美，但我接近了我的想法。如果有人认为他们可以改进，请继续。如果你做得比我好，那么我会选择你的答案。

我主要的困惑是我没有意识到::before伪元素放在主元素之上。我以为::before被放置在元素之前。一旦我想到这一点，我只需要切换渐变并使用不透明度。

元素的顶部（和底部）仍有清晰的线条。我不知道如何解决这个问题。

new JSfiddle

div::before{
    background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(204,204,204,0.1) 60%);
}

div {
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(204,204,204,0.5) 20%,rgba(204,204,204,0.5) 80%,rgba(255,255,255,1) 100%);
}

渐变在三面褪色

2 个答案: