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があります（私はRuby on Railsを使用しているため、表記です）

     <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 に答える