不透明度 CSS の は、次のような要素の透明度を制御するように指定するプロパティです。 コンテンツ または 画像 。このプロパティを使用すると、任意の画像を完全に不透明に設定できます ( 見える )、完全に透明 ( 隠れた ）、または半透明（部分的に見える）。 0 と 1 の間の数値を受け取ります。0 は完全に透明であることを定義し、1 は完全に表示されることを定義します。 0.2、0.4、0.6 などの 0 ～ 1 の不透明度値は、10 進数値を徐々に増やすことによってイメージを透明から不透明に変更します。
構文
opacity :
画像を半透明にするには、数値は 0 ～ 1 である必要があります。 1 を指定すると画像は不透明になり、数値が 0 だと画像は完全に透明になります。
例1 : この例では、不透明度プロパティを使用して、要素の上にマウスを移動したときに要素を透明にします。
Main.html
Simple example to display the Opacity .get { background: red; width: 300px; height: 250px; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; } .get:hover { // hover is used to show the impact on element when the mouse on the element. opacity: 0.5; // set the opacity value to 0.5 } // use of class in CSS. 出力
赤いボックスの上にマウスを置くと、透明または不透明の効果が表示されます。
CSS のトランジションの不透明度
CSS では、 遷移の不透明度 は、不透明度の状態をあるレベルから別のレベルにスムーズに変更するために使用されるプロパティです。これは、遷移の不透明度が、定義された期間で不透明要素の状態を透明に変更することを意味します。トランジションには、transition-property、transition-duration、transition-timing-function、transition-delay の 4 つのプロパティがあり、画像に不透明効果を実行するために使用されます。の 移行期間 は、ミリ秒または秒単位で定義された期間にわたる要素の不透明度効果を反映する、段階的な変化または突然の変化にとって重要なプロパティです。
遷移の簡略プロパティは次のとおりです。
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
CSS でトランジションの不透明度を定義する構文
{ transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } 遷移プロパティ
以下は、トランジション効果を制御するために使用されるトランジション プロパティです。
if else if else if Java
| 価値 | 説明 |
|---|---|
| 遷移プロパティ | 画像へのトランジション効果を示す CSS プロパティの名前を定義するために使用されます。 |
| 移行期間 | これは、トランジション効果を表示する時間を秒またはミリ秒で定義するために使用されます。 |
| 遷移タイミング関数 | 画像の速度曲線を定義してトランジション効果を示すために使用されます。 |
| 遷移遅延 | トランジション効果を要素または画像で開始するかどうかを指定します。 |
注: トランジション プロパティを画像またはコンテンツに設定する際、transition-duration プロパティを定義する必要があります。それ以外の場合、持続時間は 0 になり、効果は現れません。
CSS におけるトランジションの不透明度の必要性
の 不透明度 は、不透明度の範囲を 0 から 1 に設定することで画像の透明度を制御するために使用される単純な CSS プロパティです。不透明度の効果を示すために、要素上の静的または突然の変化を反映します。たとえば、画像を透明で表示したい場合は、不透明度の値を 0 から 1 に設定する必要があります。その後、時間をかけずにすぐに不透明度の効果が表示されます。したがって、私たちは 遷移の不透明度 定義された期間にわたる要素の透明度を制御する CSS 。遷移不透明度で遷移時間関数を使用すると、画像上の高速不透明度効果を指定する要素の速度曲線を決定できます。このように、トランジションの不透明効果を使用して、すぐに発生するのではなく、指定された期間内の変化を反映します。
例 2: この例では、不透明度効果を即時ではなく指定された期間内に反映するトランジション不透明度プロパティを使用します。
ファイル1.html
CSS transition opacity Property .pr{ width: 400px; height: 300px; background: lightgreen; position: relative; } .cr{ width: 270px; height: 200px; position: absolute; /* top: 30px; */ left: 30px; color: white; margin: 40px auto; margin-bottom: 30px; font-family: Arial, Helvetica, sans-serif; background: red; font-weight: Bold; font-size: 36px; opacity: 0; } .cr:hover { opacity: 1; transition: opacity 2s ease-out; /* It slowly shows the element as we place the mouse on the box and when the time reaches 2 seconds, it is fully visible. */ -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-in-out; } JavaTpoint: Best Tutorial Site Check link is working <br> <p> https://www.javatpoint.com/ </p> 出力
