无法实现 css 渐变叠加答案

【问题标题】：Trouble achieving css gradient overlay无法实现 css 渐变叠加
【发布时间】：2013-11-15 08:24:49
【问题描述】：

我正在尝试实现上述渐变（对不起小图）。我最初尝试通过 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，各种灰色阴影覆盖了我的内容。

【问题讨论】：

请创建一个小提琴或草图，或展示您尝试过的代码，以便我们更好地帮助您。
请不要使用可以更改的外部链接。如果该资源消失，这会使您对未来用户的问题贬值。
我用一些真实的代码更新了这个问题。
你的意思是喜欢：jsFiddle?

标签： css gradient

【解决方案1】：

试试这个伙伴...

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
}

【讨论】：