css - 在背景颜色之上应用渐变 CSS

Question

我想要一个纯色的背景颜色，并在它上面有一个具有一定不透明度的渐变。这样，它看起来像是一种背景颜色，上面有渐变效果。

这是我的html：

<article>
    <a href="" class="article">
      <h2>Title<i></i></h2>
      <img src="images/media-examples/pic1.jpg">
    </a>
</article>

我想将此应用于标题以创建如下内容：

Answer 1

从示例来看，您不需要渐变。您只需要一个带有不透明度的覆盖元素。所以

HTML

<div id="element">
 <div id="overlay">
 <h2>H2 Title</h2>
 </div>
</div>

CSS

#element {background:url('image.jpg');}
#overlay {background:rgba(0, 0, 0, 0.5);}

我不会详细介绍，因为它表明你想要一个教程，真的你需要尝试它，然后在出错时寻求帮助。尝试搜索互联网，网上会有很多教程。

更新 要使用您现有的 HTML，请尝试应用此 CSS

article {width:300px;}
article img {position:fixed; top:0; border:3px solid #253d8e; z-index:99;}
article h2 {z-index:999; position:fixed; top:0; color:#fff; background:rgba(0, 0, 0, 0.5); width:290px; display:inline-block;margin:0; padding-top:10px; padding-bottom:10px; padding-left:10px;}

您将需要更新它以满足您的需求，但应该给您一个想法。看到它在 jsfiddle 上工作

Answer 2

我会在具有不透明度背景的图像上添加另一个元素......这样您就可以轻松控制所有属性。

您还可以将两个背景应用于同一元素或使用伪元素，如下所示：http: //nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

编辑：抱歉，Tim 使用相同但更详细的覆盖元素答案只是稍微快了一点 =) 但现在我只想对其他两个建议有所了解；-)