我是一个CSS新手试图让一些文字渐变继续下去。我尝试了这段代码here,但它对我不起作用,很可能是因为h1对象嵌套在#header div中。我想这与我不了解的图层有关。要么我得到一个在一切之前的级别块,要么根本没有出现。
在此特定实例中,此代码会在所有内容前面显示一个大的渐变条:
#header {
clear:both;
float:left;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#080E73 url(../images/header-background.png) repeat-x left 0px;
width:100%;
max-height: 175px;
color: #080E73;
}
#header h1 {
margin-bottom: 0;
color: #000;
position: relative;
}
#header h1 span {
background:url(../images/headline-text.png) repeat-x;
display: block;
width: 100%;
height: 100%;
position: absolute;
}
这是HTML(我在轨道上使用ruby因此是符号)
<div id="header">
<% unless flash[:notice].blank? %>
<div id="notice"><%= flash[:notice] %></div>
<% end %>
<%= image_tag ("header-image.png") %>
<h1><span></span>Headline</h1> <strong>Byline</strong>
... #navbar html...
</div>
我尝试过使用z-index,但我无法想出任何好的结果。有什么想法吗?
答案 0 :(得分:1)
当你说“这段代码会让一个大的渐变条出现在所有东西面前”时,渐变应该出现在所有东西的前面,但它应该是透明的,并且颜色与背景颜色相同。
您是否可能未正确导出PNG?或者你应用了透明度的颜色块是不正确的颜色?