我想要纯色背景,并在其顶部有一个具有一定不透明度的渐变。这样,它似乎是一种背景颜色,上面有渐变效果。
这是我的 html:
<article>
<a href="" class="article">
<h2>Title<i></i></h2>
<img src="images/media-examples/pic1.jpg">
</a>
</article>
我想将其应用于页眉以创建如下内容:
最佳答案
从示例来看,您不需要渐变。您只需要一个具有不透明度的叠加元素。所以
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;}
您需要更新它以满足您的需要,但应该给您一个想法。看到它工作 here on jsfiddle
关于css - 在背景颜色之上应用渐变 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15111772/