この記事では、不透明度を理解するのに役立つ概念を紹介します。 このパラメータを制御する方法を説明します。この記事では、次のポイントについて説明します。
要素の背景の不透明度は、HTMLデザインの便利な機能設定です。不透明度のレベル（透明度の逆）を設定することにより、デザイナーはCSSの不透明度プロパティを介して要素の可視性を制御できます。これは通常、要素が上下にカスケードされている場合の背景設定として使用されます。
この機能が使用される最も一般的なシナリオは次のとおりです。
- 部分的に透明な背景画像がテキスト要素の後ろに配置されます。
- 背景画像はぼんやりと見えるので、前のテキストを支配することはありません。
- ユーザーが明示的に画像を表示することを選択すると、画像に完全に焦点が合う場合があります。
あなたはで読みたいかもしれません CSSの不透明度について学ぶ前に。
包括的なCSSチュートリアルについては、次のWebサイトをご覧ください。 初心者のためのEdurekaCSSチュートリアル 。 CSSを使用してHTMLWebデザインを拡張する方法についての優れた注意事項が得られます。
CSSの不透明度に関するこの記事に進む
CSSの不透明度
CSSでは、不透明度は0.0〜1.0の範囲の数値として設定されます。ゼロに近い値は透明度が高いことを表し、画像の視認性は非常に明るくなります。 50％の透明度で表示されている画像の例から始めましょう。以下の例1を参照してください。
例1：背景画像をセミに設定 透明性
img {不透明度：0.5フィルター：alpha（opacity = 50）/ * IE8以前の場合* /} 
例1：出力
元の画像（不透明度100％）
和集合節は
不透明度が50％に設定された画像
上記の例では、1つの要素（画像）しかありませんでした。 text、div要素など、他の要素もopacityパラメーターで設定できます。
CSSの不透明度に関するこの記事に進む
カスケード要素で継承された不透明度
要素が積み重ねられている場合、背景要素に不透明度設定があると、すべての子要素に継承されます。これは 初期設定 。つまり、テキストボックスが画像の上に配置され、画像の不透明度が0.5に設定されている場合、画像とテキスト要素の両方が部分的にしか表示されません。
次の例では、TOM＆JERRY画像の上に配置された子テキスト要素のインスタンスを取り上げます。例2で、デフォルトの不透明度効果を確認できます。
.container {position：relative text-align：center opacity：0.5} .centered {position：absolute top：50％left：50％transform：translate（-50％、-50％）color：blue font-size：40px} } トムとジェリー例2：テキストは親画像から不透明度を継承します
CSSの不透明度に関するこの記事に進む
カスケード要素のRGBA属性設定
カスケード要素を使用して不透明度を制御する別の方法があります。子要素がその背景要素の不透明度の影響を受けないようにしたい場合は、次を使用できます。 RGBA属性設定 。
ソートint配列c ++
例3：RGBA設定の使用
背景：rgba（76、175、80、1.0）/ *画像に不透明度の設定がありません* / / *不透明度が100％のテキストの背景が緑色* / / *青色のテキストの不透明度が100％* /
背景：rgba（76、175、80、0.4）/ *画像に不透明度の設定がありません* / / *不透明度が40％のテキストの背景が緑色* / / *不透明度が100％のテキストが青色のまま* /
RGBカラーコードの後、属性「a」は アルファ 。ザ・ アルファ パラメータは、0.0（完全に透明）から1.0（完全に不透明）までの数値です。
CSSの不透明度に関するこの記事に進む
C ++で配列を並べ替える
ホバー効果の不透明度の変化
一部のシナリオでは、Webデザイナーは、ユーザーが要素に焦点を合わせているかどうかに応じて不透明度を変化させたいと考えています。たとえば、画像がデフォルトで50％の不透明度に設定されているとします。ただし、ユーザーが画像の上にマウスを置くと、100％の不透明度で画像に完全に焦点が合うようになります。
例4は、これがどのように行われるかを示しています。
注意すべき一般的なポイント：
- 不透明度の設定は、CSSで「可視性」属性を使用する代わりの方法です。ただし、不透明度設定を使用すると、ゼロから完全までのさまざまな透明度を簡単に設定できます。
- 不透明度のレベルは、さまざまなブラウザで慎重にテストした後に設定する必要があります。不透明度を低い値に設定すると、テキストまたは画像が完全に見えなくなったり、読み取れなくなったりすることがあります。
- 不透明度を使用する背後にある考え方は、一部の要素に焦点を合わせ、他の背景要素がユーザーの注意をそらさないようにすることです。したがって、このような背景要素は不透明度が低く設定されます。
- Internet Explorerでは、IE8以前のバージョンでは、不透明度プロパティは1から100の範囲の「フィルター」設定です。他のすべてのブラウザーでは、0から1の範囲です。
これで、CSSの不透明度に関するこの記事は終わりです。
ウェブ開発について詳しく知りたい場合は、 Edurekaによる。 Web開発認定トレーニングは、HTML5、CSS3、Twitter Bootstrap 3、jQuery、およびGoogle APIを使用して印象的なWebサイトを作成し、Amazon Simple Storage Service（S3）にデプロイする方法を学ぶのに役立ちます。
それでも興味がある場合質問がある場合は、この「OpacityInCSS」ブログのコメントセクションに投稿してください。できるだけ早くご連絡いたします。