CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの不透明度

Webサイトをデザインするときに、Webページ上の要素を他の要素よりも透明に見せたいと思うかもしれません。たとえば、ある程度透明に見せたい多数の画像を含むWebページをデザインしている場合があります。

そこで、CSSの不透明度プロパティが役立ちます。CSSの不透明度プロパティは、Web要素の透明度を指定するために使用されます。

このチュートリアルでは、例を参照して、不透明度プロパティを使用してWebページ上で要素を透明にする方法について説明します。このチュートリアルを読み終えると、CSSで不透明度プロパティを操作するエキスパートになります。

CSS不透明度プロパティ

CSS opacityプロパティは、要素を透けて見えるようにします。

不透明度プロパティの値の範囲は0〜1です。不透明度プロパティの値が低いほど、要素の透明度が高くなります。したがって、値が0の場合、要素は完全に不透明または完全に透明になり、値が1の場合、要素は通常どおりに表示されます。

CSS不透明度プロパティの構文は次のとおりです。

img { opacity: 0.5; }

上記の例では、任意のimgの不透明度を設定します Webページ上の要素は0.5に等しくなります。これは、すべての画像がデフォルトよりも50％透明に見えることを意味します。

不透明度プロパティは、親要素と親に含まれるすべての子要素の両方に適用されます。これは、テキストを含むボックスにopacityプロパティを適用すると、ボックスとテキストの両方が不透明になることを意味します。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

opacityプロパティの構文について説明したので、このプロパティを実際に使用する方法の例をいくつか見ていきます。

透明な画像の作成

画像を透明に見せたいウェブサイトをデザインしているとしましょう。この目標は、不透明度CSSプロパティを使用して達成できます。

画像を0.7の不透明度に設定するために使用される不透明度の例を次に示します（これにより、画像は70％不透明になります）：

img {
	opacity: 0.7;
}

私たちのコードは次を返します：

CSSの不透明度

左側には、不透明度の値が設定されていない画像を作成しました。これは、画像が透明ではないことを意味します。右側では、画像を作成し、その不透明度の値を0.7に設定しています。その結果、右側の画像は左側の画像よりも透明になります。

ホバーで不透明度をトリガー

不透明度プロパティを使用しているときに、ユーザーが画像にカーソルを合わせたときに画像を多かれ少なかれ不透明に見せたいと思うかもしれません。

：hover CSSセレクターを不透明度レベル属性と組み合わせて使用​​すると、ユーザーが画像にカーソルを合わせたときの画像の透明度のレベルを変更できます。

デフォルトで画像を50％透明（つまり、不透明度0.5）にしたいとします。また、ユーザーが画像にカーソルを合わせたときに、不透明度の値を1に設定します。このタスクは、次のコードを使用して実行できます。

.img {
  opacity: 0.5;
}

.img:hover {
  opacity: 1;
}

コードの結果は次のとおりです。

CSSの不透明度

左側には、ユーザーがカーソルで要素にカーソルを合わせたときの画像の例を示しています。右側では、ユーザーがカーソルで要素にカーソルを合わせていないときに画像がどのように表示されるかを確認できます。

デフォルトでは、画像は50％透明ですが、ユーザーが画像にカーソルを合わせると、画像の不透明度が1に設定され、画像が完全に表示されます。

透明なボックス

不透明度要素を使用して、CSSでボックスを透明にすることもできます。

opacityプロパティを使用して要素を透明にすると、その要素内のすべての要素も、指定した不透明度を共有します。

Webページにボックスを作成する2つの

要素があるとします。これらの
要素の1つを通常どおりに表示し、もう1つを50％透明に表示する必要があります。このタスクを実行するには、次のコードを使用できます。

.div1 {
background-color: #B5651D;
	opacity: 0.5;
 	text-align: center;
  	padding: 20px;
  	color: black;
}

私たちのコードは次を返します：

CSSの不透明度

この例では、2つのボックスを作成しました。上のボックスは下のボックスと同じスタイルですが、不透明度の値は指定されていません。下のボックスの不透明度の値は0.5に設定されています。これは、ボックスが50％透明に見えることを意味します。

ご覧のとおり、下部のボックスのテキストも不透明になっています。これは、

ボックス内のすべての要素が、指定した透明度の値を継承するためです。

RGBA色の透明度

上記の例では、opacityプロパティを使用して、要素をますます不透明にしました。ただし、要素を透明にするために使用できる別のアプローチがあります。RGBAカラー値を使用して要素の背景色を設定します。

色を操作するときは、RGBを使用して色の値を指定することがよくあります。 RGBの使用に加えて、指定した色の不透明度を設定するアルファ値（RGBA）を指定することもできます。

このアプローチは、要素の背景色の不透明度を設定できるので便利です。不透明度は、より透明にされた要素内のどの要素にも適用されません。これは、不透明度の値が指定されている要素内のすべての要素に適用される不透明度属性とは異なります。

前の茶色のボックスの例を見てみましょう。ボックスを70％透明にしたいが、ボックス内のテキストは透明にしたくない場合は、次のコードを使用できます。

.div1 {
 	text-align: center;
  	padding: 20px;
  	color: black;
	background: rgba(181, 101, 29, 0.3);
}

私たちのコードは次を返します：

CSSの不透明度

コードで指定する不透明度の値は0.3です。これは、不透明度が低いほど要素の透明度が高くなり、不透明度が0.3の場合、要素の透明度が70％になるためです。この例では、テキストの色も黒に設定しています。

上のボックスは、不透明度のない

の例です。下のボックスはrgba()を使用しています 不透明度を0.3に設定する値。ご覧のとおり、下部のボックスは上部のボックスよりも大幅に透明です。

ただし、ボックスの内容-テキストThis is a box .—これ以上透明ではありません。これは、ボックスの背景色を透明に設定したためです。

結論

CSS opacityプロパティは、Webページ上の要素の透明度を設定するために使用されます。

このチュートリアルでは、例を参照して、不透明度属性を使用して画像とボックスの不透明度を変更する方法について説明しました。このチュートリアルでは、RGBAカラーを使用してCSSで透明な効果を作成する方法についても説明しました。これで、プロのように不透明度属性の操作を開始するために必要な知識を身に付けることができます。


  1. CSSイメージスプライトを使用する利点

    画像スプライトを使用する主な利点は、httpリクエストの数を減らして、サイトの読み込み時間を短縮できることです。また、画像の読み込みが速くなり、あるイベントでのある画像から別の画像への切り替えがはるかにスムーズになります。画像スプライトは、1つの画像に配置された画像のコレクションです。 以下は、CSSを使用した画像スプライトの利点を示すコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Taho

  2. CSSの不透明度/透明度

    CSS Opacity / Transparencyの場合、opacityプロパティが使用されます。たとえば、 opacity: 0.3; 以下は、CSSを使用した不透明度/透明度を示すコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {    width: 200px;   &