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 サイトの他の関連記事を参照してください。