在背景颜色上应用渐变CSS

我想要有一个纯色的背景，并在其顶部有一个具有某种不透明度的渐变。这种方式似乎是一个背景色，在其顶部有一个渐变效果。在背景颜色上应用渐变CSS

这是我的html：

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

我想这适用于头创造这样的事情：

enter image description here

来源

2013-02-27 Daniel Ramirez-Escudero

http://gradients.glrzad.com/只要让你的渐变..附加CSS到顶部的块元素？ – 2013-02-27 13:22:25

@SimonPertersen他不需要毕业 - 它是一个坚实的块。需要不透明 – 2013-02-27 13:25:38

如果他只是显示错误，他可能需要一个这是方式?? :) – 2013-02-27 13:26:08

由例子来看，你不想梯度。你只需要一个带有不透明度的重叠元素。所以

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

来源

2013-02-27 12:17:19

我已经搜索并找不到我需要的东西。我想不改变html5结构。我认为之前和之后会有所帮助，但似乎并不...无论如何感谢您的提示 – 2013-02-27 12:56:27

请参阅我的编辑以使用您现有的HTML – 2013-02-27 13:17:52

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

您还可以申请两个背景相同的元素，或者使用伪元素喜欢这里：http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

编辑：对不起，蒂姆只是一点点与相同，但更详细的覆盖元件答案更快=）但现在我只想为其他两个建议的一些功劳;-)

来源

2013-02-27 12:21:37

我已经检查过您所说的这个网站。我试图将梯度应用于：before。通过这种方式，渐变可以在元素的顶部，但不起作用。我究竟做错了什么？ – 2013-02-27 12:58:22

在背景颜色上应用渐变CSS

回答

相关问题