CSSで画像の透明/不透明効果を実現する方法

CSS 画像の透明度と不透明度は、Web 開発で一般的に使用される手法の 1 つです。画像を透明に処理することで、Web サイトをより美しくプロフェッショナルなものにし、Web サイトの視覚効果とユーザー エクスペリエンスを向上させることができます。この記事ではCSSで画像の透明・不透明効果を実現する方法を詳しく紹介します。

1. CSS 画像の透明度の概要

透明度は、要素とその背景の透明度を設定して要素や背景を表示または非表示にできる CSS3 のプロパティです。要素の透明度は opacity プロパティで設定でき、これは画像だけでなくすべての要素に適用できることに注意してください。

透明度属性の値は、0 (完全に透明) から 1 (完全に不透明) までの数値です。たとえば、画像の透明度を 0.5 に設定すると、画像の透明度は 50% になります。

2. 画像の透明効果を実現する CSS

1. 透明度

最も一般的な方法は、透明度属性を使用することです。 CSS では、opacity 属性を次のように使用できます。

img{
    opacity:0.5; 
}

ここで、0 は完全に透明、1 は完全に不透明を意味します。パーセンテージを使用して透明度を表すこともできます。たとえば、0.5 は 50% の透明度を意味します。

このメソッドはすべての背景とコンテンツに対して機能し、background-color の透明度を高めることで背景の不透明度に影響を与えることができます。

2. 疑似要素を適用する

次の例では、疑似要素を使用して画像の透明度を実現します。まず、position:relative 属性を使用して親要素を相対的に配置し、次に position:absolute を使用して擬似要素を親要素の先頭に絶対的に配置します。 background-color 属性と opacity 属性を疑似要素に追加して、画像を半透明に見せます。

<style>
    .parent {
        position: relative;
        display: inline-block;
    }
    .parent::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #000;
        opacity: 0.5;
        z-index: 1;
    }
    .parent img {
        position: relative;
        z-index: 2;
    }
</style>

<div class="parent">
    <img src="https://picsum.photos/200" alt="图片">
</div>

3. ブレンド モード

ブレンド モードは、2 つ以上のレイヤー間に視覚効果を作成する CSS プロパティです。 mix-blend-mode プロパティを使用して、2 つ以上のレイヤーの色を混合して視覚効果を作成します。描画モードには「乗算」「スクリーン」「オーバーレイ」「ハードライト」など数多くの種類があります。

たとえば、前景画像を背景画像に混ぜます:

<style>
    .parent {
        position: relative;
        display: inline-block;
    }
    .parent img {
        mix-blend-mode: multiply;
    }
</style>

<div class="parent">
    <img src="background.jpg" alt="背景图片">
    <img src="foreground.png" alt="前景图片">
</div>

4. 透明性と疑似クラス

最後に、疑似クラスを通じていくつかの優れた効果を実現できます。と透明属性の美しい効果。以下の例では、透明度を 0.8 に設定し、ホバー擬似クラスを追加して透明度の値を変更します。これにより、マウスを画像上に移動すると画像がより鮮明になり、マウスを離すと半透明になります。

<style>
    .parent {
        position: relative;
        display: inline-block;
    }
    .parent img {
        opacity: 0.8;
        transition: opacity 0.3s ease-in-out;
    }
    .parent:hover img {
        opacity: 1;
    }
</style>

<div class="parent">
    <img src="https://picsum.photos/200" alt="图片">
</div>

3. 概要

上記は、CSS 画像の透明効果と不透明効果を実現するいくつかの方法です。これらのテクニックを使用すると、Web サイトのビジュアルを美しくし、ユーザー エクスペリエンスを向上させ、Web ページによりプロフェッショナルな外観と操作性を与えることができます。これらに習熟していれば、Web 開発作業により柔軟で効率的なソリューションを提供できるようになります。

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