在背景颜色上应用渐变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上工作