ホームページ > 記事 > ウェブフロントエンド > CSSの不透明度を設定する方法
CSSの不透明度を設定する方法
- 藏色散人オリジナル
- 2021-04-02 10:59:474477ブラウズ
CSS の不透明度を設定する方法: 最初に HTML サンプル ファイルを作成し、次に img タグを使用して画像を導入し、最後に CSS スタイルを style タグに「opacity: 0.5;」として追加して、透明度を設定します。画像。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター
css では次の 2 つのメソッドを使用できます: filter:alpha( ) と opacity 不透明度を設定します。opacity を使用して不透明度を直接設定する場合、サイズの範囲は 0 ～ 1 です。filter:alpha() を使用する場合、サイズの範囲は 1 ～ 100 です。
filter:alpha() と opacity は両方とも透明度を設定しますが、不透明度は IE8 以前では互換性がないため、filter 属性を設定する必要があります
a:hover { opacity: 1; filter: alpha(opacity=100);}When opacity は透明度を直接設定するために使用され、サイズ範囲は 0 ～ 1 で、1 の場合は不透明になります。filter:alpha() を使用して不透明度を設定する場合、サイズ範囲は 0 ～ 100 です。 100.
フィルターの基本属性:alpha()
filter：alpha（opacity，finishopacity，style，startX，startY，finishX，finishY）.
opacity: 透明度レベル、範囲は 0 ～ 100、0 は完全に透明を表し、100 は完全に不透明を表します。
finishopacity: グラデーションの透明度効果を設定する際に、最後の透明度を指定するために使用され、範囲も 0 ～ 100 です。
style: グラデーションの透明なスタイルを設定します。値 0 は均一な形状を表し、1 は直線状の形状を表し、2 は放射状の形状を表し、3 は長方形を表します。
startX と startY: グラデーション透明効果の開始 X 座標と Y 座標を表します。
finishX とfinishY: グラデーション透明効果の終了の X 座標と Y 座標を表します。
不透明度属性:
opacity: value|inherit;
値は不透明度を指定します。 0.0 (完全に透明) から 1.0 (完全に不透明) まで。
inherit opacity 属性の値は親要素から継承する必要があります。
例:
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>图像透明度</h1>
<p>opacity 属性规定元素的透明度。值越低，越透明：</p>
<p>50% 不透明度的图像：</p>
<img src="/i/photo/tulip-red.jpg" alt="Tulip" width="600" style="max-width:90%">
</body>
</html>効果:
推奨学習:「css ビデオ チュートリアル 」
以上がCSSの不透明度を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。