使用 css 定位图层和文本渐变

Question

我是一名 CSS 新手，正在尝试实现一些文本渐变。我在此处尝试了此代码，但没有成功对我来说不起作用，很可能是因为 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（我在rails上使用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，但我无法想出任何好的方法结果。有什么想法吗？

Answer 1

当您说“此代码使一个大渐变条出现在所有内容前面”时，渐变应该出现在所有内容前面，但它应该是透明的并且颜色与背景颜色相同。

是否有可能您没有正确导出PNG？或者您应用透明度的颜色块不是正确的颜色？