我正在尝试实现上述渐变(抱歉图片太小)。我最初尝试通过 linear-gradient 属性仅使用 CSS3,但由于某种原因,叠加层没有融入页面背景属性。我基本上是在寻找一种将 div 的内容(可能是白色文本或图像)淡化为 #252525 背景色的方法。
我试过这种方法: http://dabblet.com/gist/6340486
body {
background: #252525;
}
div {
position: relative;
height: 50px;
width: 100px;
}
div:after {
background: #252525;
background: linear-gradient(180deg, rgba(37, 37, 37, 0.0000), rgba(37, 37, 37, 1));
top: 0;
left: 0;
right: 0;
bottom: 50px;
content: " ";
position: absolute
}
但这一切似乎实现的是一个奇怪的渲染 div,其中覆盖了我的内容的各种灰色阴影。
最佳答案
试试这个伙伴......
div:after {
background: linear-gradient(to bottom, rgba(37, 37, 37, 0.0000), rgba(37, 37, 37, 1));
top: 0;
left: 0;
width:100%;
height:100%;
content: " ";
position: absolute
}
关于css - 无法实现 css 渐变叠加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18446492/