1

css3 グラデーションと一緒に背景画像を使用できません。多くの解決策を試しましたが、まだ画像を取得できません。 私のフィドル

画像はこちら

使用する画像は透明です。background-image: url("img.png"), -webkit .. を追加しようとしましたが、これは機能していないようです。また、以下の方法で div を試してみました..

<div id="div-with-gradient">
   <div id="div-with-image">
    <!-- content -->
    </div>
</div>

どんな解決策も本当に感謝しています..

4

1 に答える 1

4

先週行ったこのデモをチェックしてみてくださいhttp://dabblet.com/gist/3106299

同じ要素で画像と CSS3 グラデーションを使用します。

フィドルに関してurl('../img/msg_arrow.png')は、jsFiddle では機能しません。完全なパスを指定する必要があります。

また、スタイルをオーバーライドしています

.btn1 {
    background-color: #f47e29;
    border: solid 1px #b16127;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f48c41', endColorstr='#d66f24',GradientType=0 ); /* IE6-8 */
    padding: 0 26px;
}

オレンジ一色の背景を設定します。

そして、私が今気付いた別のこと: の使用background-imageも正しくありません:

background-image: url('../img/msg_arrow.png') scroll 0 0 no-repeat, linear-gradient(bottom, #000000, rgba(0,0,0,.12) 0%, rgba(0,0,0,.12) 49%, rgba(72,72,72,.12) 50%, rgba(247,245,245,.12));

backgroundの代わりにそこで使用する必要がありますbackground-image。

最後に、もう 1 つ注意すべき点は、背景が重ねて表示され、最後にリストされた背景がスタックの一番下にあることです。あなたの場合、半透明の画像の後ろに表示されるのはグラデーションです。また、グラデーションは 4 番目の RGBa 値 (アルファ) が 0.12 と非常に低い色で構成されているため、すべてが正常に機能している場合でも、別の画像の背後にあるものを見つけるのは非常に難しい場合があります。

于 2012-07-17T15:33:16.117 に答える