CSSで透明度・不透明度を設定する方法

CSS は広く使用されているスタイル シート言語であり、主に HTML、XHTML、XML などのファイルにスタイルを追加するために使用されます。 CSS では、色の変更や要素のブレンドによって視覚効果を作成するために、透明度によって要素の不透明度が制御されます。この記事では、CSS で透明度と不透明度を使用する方法について説明します。

透明度

透明度は、要素の不透明度または可視性の度合いです。このプロパティは CSS の「不透明度」によって設定され、0 から 1 までの数値の範囲になります。透明度 0 の要素は表示されませんが、透明度 1 の要素は完全に不透明になります。さらに、0.5 などの 10 進数値を使用して、完全な透明と完全な不透明の間の透明度を取得できます。以下に例を示します。

div {
    opacity: 0.5;
}

この例では、「div」要素は半透明、つまり 50% の不透明とみなされます。

透明の適用例:

• 単色を半透明に変更して、UI デザインを強化します。デザインプロセス中に、半透明の色を使用して要素間のコントラストを強調し、要素を読みやすくすることができます。
• Web サイトの背景画像とビデオの透明度の変換に使用されます。背景とコンテンツの間のトランジションを作成する必要がある場合、Web サイトの背景画像やビデオで透明性を使用することで簡単に実現できます。
• Web サイトのナビゲーション メニューに使用されます。透明度を使用して美しいメニュー効果を作成します。メニューの背景を透明にすると、ページ上の他の要素の背景に対してより多くのコンテンツが見えるようになります。

不透明度

不透明度は透明度の正反対です。不透明度は、要素の完全に不透明な状態を定義します。 CSS では、「rgba」または「hsla」関数を使用すると不透明度が設定され、ユーザーは色と透明度を組み合わせた値を設定できるようになります。 2 つの要素の不透明度を組み合わせて、元の明るさとコントラストを維持しながら、ブレンドされた要素のブレンド カラーである新しい色を作成できます。 「rgba」と「hsla」を使用した例を次に示します。

div {
    background-color: rgba(255, 255, 255, 0.5);
    background-color: hsla(0, 0%, 100%, 0.5);
}

この例では、背景色は 50% の不透明度に設定されています。これは、背景色がページ上の他の要素と混合して新しい色が生成されることを意味します。

不透明度の適用例:

• 背景色は完全に不透明に設定され、さまざまな視覚効果を実現します。たとえば、デザインでは、不透明度を使用して背景画像の明るさを下げ、他の要素とよりよく調和させることができます。
• カードなどの UI デザイン要素のカバーとして使用されます。カバーを完全に不透明に設定すると、カードなどの UI 要素がより鮮明に表示されると同時に、他の要素の下に覆われていない部分が見えないようにすることができます。
• 背景要素が透過できるように透明なテキスト ボックスを指定します。テキスト ボックスを追加する必要があり、ページ上の要素がテキスト ボックスを透過できるようにする必要がある場合は、テキスト ボックスの不透明度を 0 に設定して、背景要素が透過できるようにすることができます。

概要

透明度と不透明度はどちらも CSS の優れた機能です。 UI デザインでは、これらの機能を使用すると、連続的な色の変化やコントラスト効果を簡単に作成でき、場合によってはページ コンテンツの視認性も向上します。透明性と不透明性をどこで使用する場合でも、その基本原理を理解することが重要です。

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