Позиционирование слоев и текстовых градиентов с помощью 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 (я использую 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? или что блок цвета, к которому вы применили прозрачность, не является правильным цветом?