在背景颜色上应用渐变 CSS答案

【问题标题】：applying gradient CSS on top of background-color在背景颜色上应用渐变 CSS
【发布时间】：2013-02-27 12:08:29
【问题描述】：

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

这是我的html：

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

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

【问题讨论】：

gradients.glrzad.com 只需制作渐变.. 将 css 附加到顶部的块元素上？
@SimonPertersen 他不需要研究生——它是一个坚实的块。需要不透明度
如果他只是显示错误，他可能需要一个这样的方法？？ :)
实心块已经应用了较低的不透明度，但渐变应该在块的顶部以提供与 PSD 中一样的良好效果。有没有办法在不添加 html 标签元素并将其放在上面的情况下做到这一点？如果不是，它似乎没有额外的元素是不可能的。谢谢大家的回答！
抱歉粗鲁，但是在提供的 JPG 中根本没有渐变，请说明您想要什么，我们可以为您提供最好的帮助。渐变是颜色的差异。不透明度是您在该 JPG 中所拥有的。

标签： css gradient opacity

【解决方案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;}

您需要对其进行更新以满足您的需求，但应该给您一个想法。看到它工作here on jsfiddle

【讨论】：

我已经搜索过，但找不到我需要的东西。我想根本不改变 html5 结构。我认为之前和之后会有所帮助，但似乎没有...谢谢您的提示

【解决方案2】：

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

您还可以将两个背景应用于同一个元素或使用伪元素喜欢这里：http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

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

【讨论】：

我已经查看了您所说的这个网站。我试图将渐变应用于：之前。这样，渐变将在物理上位于元素的顶部，但它不起作用。我做错了什么？