CSS画像の透明度を設定する方法

CSS では、不透明度属性を使用して画像の透明度を設定できます。この属性の使用構文は「opacity:value|inherit;」で、パラメータ値は不透明度を指定し、inherit はそれを示します。 opacity 属性は親要素から継承される必要があります。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

opacity 属性は、要素の不透明度レベルを設定します。

構文

opacity: value|inherit;

値は不透明度を指定します。 0.0 (完全に透明) から 1.0 (完全に不透明) まで。 Test

inherit opacity 属性の値は親要素から継承される必要があります。

CSS の opacity 属性を使用して画像の透明度を設定する例を見てみましょう:

css：
.opacity1, .opacity2, .opacity_img { display: inline-block; }
.opacity1 { filter: Alpha(opacity=0); }
.opacity2 { filter: Alpha(opacity=50); }
.opacity_img { filter: Alpha(opacity=100); }
:root .opacity1 { opacity: 0; filter: none; }
:root .opacity2 { opacity: .5; filter: none; }
:root .opacity_img { opacity: 1; filter: none; }
html：
<p>
    <a href="#" class="opacity2">
        <img class="opacity_img" src="
        " />
    </a>
</p>
<p>
    <a href="#" class="opacity2">
        <img  class="opacity2" src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" / alt="CSS画像の透明度を設定する方法" >
    </a>
</p>

レンダリング:

注:

現在主流のブラウザは opacity:value という書き込み方式をサポートしており、値の範囲は 0 から 1 までで、0 は完全に透明、1 は完全に不透明です。

ただし、この書き込み方法は IE8 以前のバージョンではサポートされていないため、フィルターを使用して解決できます: filter:alpha(opacity=value)、値は 0 ～ 100、0 は完全に透明、100 は透明です完全に不透明。上の例と同じです。

【推奨学習: css ビデオ チュートリアル 】

以上がCSS画像の透明度を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。