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

藏色散人
リリース: 2023-01-04 09:34:09
オリジナル
4495 人が閲覧しました

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

推奨学習:「css ビデオ チュートリアル

以上がCSSの不透明度を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート