将覆盖渐变应用于图像，就像myspace一样

Question

我想将渐变叠加应用于很多图像，就像myspace在新设计中所做的那样。所有图像都有黑色渐变背景的标题。

我进行了搜索，但大部分教程都是使用div上的背景图片显示的。我想将此属性应用于我页面上显示的所有<img>标记。

Here's我发现的最接近的教程就我想要实现的目标而言。但这也是使用背景图片解释的。

如果你看一下标题的背景。黑色背景确保文本足够清晰。

你可以帮我写一篇关于在所有图像上实现这个目标的通用CSS吗？

Answer 1

你应该先付出更多努力才能先尝试一下..我发现这很有趣所以我让你开始.. http://jsfiddle.net/MpmNc/1/

.overlay {
    content: 'test';
    width: 100%;
    height: 100%;
    background-color: rgba(100,255,50,0.5);
    position: absolute;
    top: 0;
}

.overlay-wrap {
    display: inline-block;
    position: relative;
}

不幸的是，似乎单独使用css就足够了 Does :before not work on img elements?

对于你的渐变： http://www.colorzilla.com/gradient-editor/