无法实现css渐变叠加

时间:2013-08-26 14:26:01

标签: css css3 gradient

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,各种灰色阴影覆盖了我的内容。

1 个答案:

答案 0 :(得分:2)

试试这个伴侣......

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
}