HTML 画像の不透明度
画像の不透明度は、時間の経過とともにフェードインまたはフェードアウトする画像を作成することです。 これを使用して、2つのイメージ間のスムーズなトランジションを作成したり、アニメーションを作成したりできます。
イメージの不透明度は、ゴースト イメージの作成にも利用できます。 この画像はほとんど見えず、装飾目的で使用されます。
また、画像の不透明度を利用して、ネガティブな画像を作成することもできます。 この画像は標準画像の反対で、特殊効果に使用できます。
HTML 画像の不透明度
不透明度は、画像の不透明度または透明度を指定する画像の効果です。 不透明度が 0 の画像は完全に透明ですが、不透明度が 1 の画像は完全に不透明です。
不透明度は、0 と 1 の間の数値、または 0% と 100% の間のパーセンテージ値のいずれかを使用して指定できます。
画像の不透明度が 1 未満の場合、画像は部分的に透明になり、背景が透けて見えます。 これにより、画像を互いに重ねたり、画像を背景にフェードアウトさせたりするなど、さまざまな刺激的な効果を作成できます。
HTML 画像の opacity プロパティは、Web ページ上の画像の不透明度を制御するために使用されます。 これは、画像を背景にフェードインさせたり、別の画像の上に重ねて表示したりするなどの効果を作成するのに役立ちます。
例を見てみましょう。 画像を 50% 不透明にしたい場合、opacity を 0.5 に設定します。 さらに、rgba() カラー値を使用して opacity を設定することもできます。
img {
opacity: 0.5;
}
opacity プロパティを hover 疑似クラスと組み合わせて、マウスが上にあるときにフェードまたはオフする画像を作成することもできます。 たとえば、次のように hover で画像の opacity を 0.5 に設定できます。
img:hover {
opacity: 0.5;
}
これにより、画像が半透明になり、その背後に背景が表示されます。
<!DOCTYPE html>
<html>
<head>
<style>
div.bg {
background: url(Please add image link here) repeat;
border: 2px solid black;
}
div.ax {
margin: 35px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.ax p {
margin: 10%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="bg">
<div class="ax">
<p>There is some text that is present in this transparent box.</p>
</div>
</div>
</body>
</html>
まとめ
HTML の画像の不透明度は、opacity プロパティを使用して制御できます。 このプロパティは、0 と 1 に設定できます。ここで、0 は完全に透明で、1つは完全に不透明です。
したがって、イメージを 50% 不透明にしたい場合は、0.5 の不透明度で rgba() カラー値を使用できます。
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn