ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで画像の透明度を設定する方法
CSSで画像の透明度を設定する方法
- 青灯夜游オリジナル
- 2021-04-21 15:51:3921015ブラウズ
CSS で画像の透明度を設定する方法: 1. filter 属性を使用して、「filter:opacity(value%)」スタイルを画像要素に追加します。値は 0 ～ 100、および「0%」です。 「」は完全に透明、「100%」は画像に変化がないことを意味します。 2. 不透明度属性、構文「opacity: value」を使用します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
方法 1: フィルター属性を使用します -- filter:opacity(%)
フィルター属性は要素の可視性を定義します (通常は) エフェクト (ぼかしや彩度など)。
不透明度(%): 画像の透明度を変換するために使用されます。値は変換のスケールを定義します。値 0% は完全な透明度を意味し、値 100% は画像に変化がないことを意味します。 0% から 100% までの値はエフェクトの線形乗数であり、画像サンプルの数を乗算するのと同じです。値が設定されていない場合、値はデフォルトの 1 になります。この関数は既存の不透明度属性と非常に似ていますが、一部のブラウザではフィルターを通じてパフォーマンスを向上させるハードウェア アクセラレーションが提供される点が異なります。
#例:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.img1{
-webkit-filter: opacity(50%); /* Chrome, Safari, Opera */
filter: opacity(50%);
}
.img2{
-webkit-filter: opacity(20%); /* Chrome, Safari, Opera */
filter: opacity(20%);
}
</style>
</head>
<body>
<div>
<p>原图：</p>
<img src="img/1.jpg" style="max-width:90%"/ alt="CSSで画像の透明度を設定する方法" >
</div>
<div>
<p>透明度为50%：</p>
<img class="img1" src="img/1.jpg" style="max-width:90%"/ alt="CSSで画像の透明度を設定する方法" >
</div>
<div>
<p>透明度为20%：</p>
<img class="img2" src="img/1.jpg" style="max-width:90%"/ alt="CSSで画像の透明度を設定する方法" >
</div>
</body>
</html>レンダリング:
#Opacity 属性は、要素の透明度レベルを設定します。値の範囲: 0.0 (完全に透明) ～ 1.0 (完全に不透明)。
例:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.img1{
opacity: 0.5;
}
.img2{
opacity: 0.2;
}
</style>
</head>
<body>
<div>
<p>原图：</p>
<img src="img/1.jpg" style="max-width:90%"/ alt="CSSで画像の透明度を設定する方法" >
</div>
<div>
<p>透明度为0.5：</p>
<img class="img1" src="img/1.jpg" style="max-width:90%"/ alt="CSSで画像の透明度を設定する方法" >
</div>
<div>
<p>透明度为0.2：</p>
<img class="img2" src="img/1.jpg" style="max-width:90%"/ alt="CSSで画像の透明度を設定する方法" >
</div>
</body>
</html>レンダリング:
(学習ビデオ共有: 
css ビデオ チュートリアル
以上がCSSで画像の透明度を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。