CSSの不透明度を設定する方法-フロントエンドQ&A-php.cn

CSSの不透明度を設定する方法

藏色散人

リリース： 2023-01-04 09:34:09

オリジナル

4521 人が閲覧しました

CSS の不透明度を設定する方法: 最初に HTML サンプルファイルを作成し、次に img タグを使用して画像を導入し、最後に CSS スタイルを style タグに「opacity: 0.5;」として追加して、透明度を設定します。画像。

CSSの不透明度を設定する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター

css では次の 2 つのメソッドを使用できます: filter:alpha( ) と opacity 不透明度を設定します。opacity を使用して不透明度を直接設定する場合、サイズの範囲は 0 ～ 1 です。filter:alpha() を使用する場合、サイズの範囲は 1 ～ 100 です。

CSSの不透明度を設定する方法

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の不透明度を設定する方法