javascript - cssを使用してインラインpngを透明にする方法は？

Question

インラインpngをdiv内で透明にする方法は？cssを使用する

<div id="report'>
<p> some text </p>

<img src=transparent.png" />

</p>

</div>

これは例えば画像です。ボール以外の白い部分を透明にしたいです。IE6では灰色に見えます

代替テキスト

このようなCSSでやりたいのですがdiv#report img {.....}可能ですか？

編集：

画像全体を透明にしたくない

アップデート：

ここに例http://jsbin.com/ubabo3を追加しました

score 2 · Accepted Answer

IE 6 は、デフォルトでは透明な png ファイルをサポートしていません。透明な png ファイルを作成するには、小さなハックを使用する必要があります。

score 1 · Accepted Answer

これを試して：

div#report img{
    background-color/**/: #000000;
    background-image/**/: none;
    opacity: 0.7;
    filter: alpha(opacity=70);
}

score 0 · Accepted Answer

よくわかりませんが、画像を完全に透明にする (つまり、見えなくする) ことができます。

div#report img { visibility: hidden } // Still takes up space
div#report img { display: none } // Hidden entirely -

ただし、少なくとも CSS 2.1 では、これを png 画像だけに適用することはできません。プロパティでチェック.pngするセレクターを使用して、追加の jQuery マジックを使用することは確かに可能です。src

score 0 · Accepted Answer

opacityプロパティはすべての要素に適用されます (サポートしているブラウザー内)。

score 0 · Accepted Answer

CSS を使用して IE6 に PNG 半透明のサポートを追加することはできません。ハック (IIRC、スタイルシートへの ActiveX の呼び出しなど) があり、Google は多くのことを見つけてくれます。

(ただし、最近では、IE6 はサポート終了まであと数週間であり、ターゲットユーザーの間での市場シェアは小さく、見栄えを良くするために余分な作業を行うことを拒否しています)

score 0 · Accepted Answer

以前はIE6 PNGの問題に対処しなければなりませんでしたが、これはうまくいきました..

あなたがすることは、あなたの「振る舞い」属性を追加することです

div#report img { behavior: url(iepngfix.htc) }

ここでファイル iepngfix.htc をダウンロードして、オンラインデモンストレーションを確認できます。すべてを段階的に説明しています。

6 に答える 6