无法实现css渐变覆盖

我试图实现上述渐变（对于小图片抱歉）。我最初尝试通过线性梯度属性使用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覆盖我的内容。

来源

2013-08-26 ThinkingInBits

请创建什么样的代码你都试过，所以我们可以更好地帮助您有一个小提琴或草图，或表演。 – kunalbhat

请不要使用可以更改的外部链接。如果资源消失，这会降低您对未来用户的问题。 –

我用一些真实的代码更新了这个问题。 – ThinkingInBits

试试这个伴侣...

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 
}

来源

2013-11-15 00:24:49 Ryan

无法实现css渐变覆盖

回答

相关问题