4

次のようなページ設定があります。

<body>
    <div id="wrapper">
        <!--- ... content ... -->
    </div>
</body>

ボディには、背景色と、背景にノイズと粒子を追加するタイリング イメージがあります。その上、#wrapper は背景として rgba(0,0,0,.3) から rgba(0,0,0,0) までの線形グラデーションを持ち、グラデーションは上部で 24 ピクセルを超えて拡張します。ページの上部にある div --- 影を追加します。

私の問題は、24 ピクセルのグラデーションが完了した後に #wrapper の背景が保持する色が、グラデーションの最後の色のアルファ値がゼロであっても、真の透明度ではないことです。これが私に残すのは、#wrapper の真の透明な背景ではなく、#wrapper が停止する場所でボディの背景に目に見える「分割線」を残すことです。

グラデーションを完全に透明にするにはどうすればよいですか? ゼロのアルファ値がこれを行うと思います。また、transparentキーワードを使用しても解決しません。

アップデート

問題を示すために写真を追加しました。最初の写真は実際の外観で、2 番目の写真は線がどこにあるのかをはっきりと示しています。

実際の見た目 ここに画像の説明を入力

ご覧のとおり、グラデーションは真の透明度にはなりません。to-color がrgba(0,0,0,0)またはとして指定されている場合は除きますtransparent。

-- クリス・バックホルツ

4

3 に答える 3

0

CSSコードを提供していません。これにより、問題をより適切に特定できます。しかし、考えられる問題の1つは、おそらくCSSプロパティのスタックです。

#wrapper {
  background: rgb(174,188,191);
  background: linear-gradient(to bottom, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
}

予想されるサンプル 

#wrapper {
  background: rgb(174,188,191);
  background: linear-gradient(to bottom, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
  background: #111; /*Overrides the above properties*/
}

最初のプロパティを別の背景プロパティで上書きします。CSSのどこかで優先度が高くなり、透明度が上書きされます。

サンプルオーバーライド

于 2012-12-14T18:32:47.877 に答える
0

Webkit ブラウザー (chrome/safari)、firefox、IE、Opera でテストしていますか? それらはすべてグラデーションの扱いが異なるためです。

CSSグラデーションジェネレーターをオンラインで使用することを検討する必要があるとは思いますが、完全には理解できません。それらのほとんどは単色を使用し、16進数を新しいRGBA（）に置き換えるだけです。

それが、自分がどのように間違っているかを知る最良の方法です。

それ以外の問題であるラッパーdivに不透明度を定義した場合。

それが私にできる最善のことです

于 2011-02-15T00:02:12.760 に答える
-1

私も同じような問題を抱えていました...そして、画像をJPGとして保存していたことが原因であることに気付きました。透明性をサポートするものが必要です。

于 2012-02-01T23:53:28.740 に答える