ホームページ  >  記事  >  ウェブフロントエンド  >  CSS opacity - 画像の半透明性を実現するコード_Experience 交換

CSS opacity - 画像の半透明性を実現するコード_Experience 交換

WBOY
WBOYオリジナル
2016-05-16 12:08:202275ブラウズ

数日前、Web デザインをしている友人から次の質問がありました。CSS を使用して画像の半透明効果を実現する方法について質問しました。この効果は IE と Mozilla の両方でサポートされています。以下に私の方法を共有します。

下の図は、CSS によって実現される画像の透明効果を示しています。

CSS opacity - 画像の半透明性を実現するコード_Experience 交換

この効果は IE ブラウザと Mozilla ブラウザの両方で機能します。コードは次のとおりです。

CSS opacity - 画像の半透明性を実現するコード_Experience 交換

IE では、「不透明度」は「フィルター」を通じて定義する必要がありますが、Mozilla では「不透明度」を直接解析できるため、この効果を両方のブラウザでサポートしたい場合は、2 つのすべてを組み合わせる必要があります。設定が追加されます。 IE の設定: this.filters.alpha.opacity=50、Mozilla の設定: this.style.MozOpacity=0.5。このコード行を直接使用して画像を定義できます。画像アドレスを次のように変更するだけです。ピクチャーエフェクト。

リンク付き画像:
CSS opacity - 画像の半透明性を実現するコード_Experience 交換

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。