1

我是一个 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，但我想不出任何好的结果。有任何想法吗？

4

1 回答 1

1

当你说“这段代码让一个大的渐变条出现在所有东西的前面”时，渐变应该出现在所有东西的前面，但它应该是透明的并且与你的背景颜色相同。

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

于 2010-03-25T01:05:18.133 回答