Question

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

Answer 1

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

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

用css定位图层和文本渐变

1 个答案: