ホームページ > 記事 > ウェブフロントエンド > CSSスタイルで透明度を設定する方法
#この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、HTML5&&CSS3 バージョン。 CSS では、opacity 属性を追加することで要素の透明度を変更できます。opacity の値は 0 ~ 1 です。値が小さいほど透明度が高くなります。ページ内で CSS を使用することが多いです。スタイルの 1 つを使用して、透明度を設定し、ページを美しくします。今日は、CSS で不透明度属性を使用する方法を紹介します。これは、参考になると思います。CSS スタイルで透明度を設定する方法: 最初に HTML サンプル ファイルを作成し、次に img を使用して画像を作成します。最後に、「opacity: value|inherit;」などの構文を使用して、CSS の不透明度属性を使用して透明度を設定します。 」。
不透明度属性
opacity: value|inherit;値: 不透明度の設定に使用されます。 0.0 (完全に透明) から 1.0 (完全に不透明)
#inherit: 不透明度属性の値は親要素から継承する必要があります
#例:
画像を不透明に設定します
<body> 未设置透明度: <img src="images/5.jpg" style="max-width:90%" alt="CSSスタイルで透明度を設定する方法" > 设置了透明度: <img src="images/5.jpg" style="max-width:90%" alt="CSSスタイルで透明度を設定する方法" > </body>
レンダリングは次のとおりです:
#注:
IE9、Firefox、Chrome、および Opera ブラウザーで透明度を設定するには、属性 opacity を使用します。不透明度プロパティは 0.0 から 1.0 までの値に設定できます。値が小さいほど透明度が高くなります。
IE8 以前のバージョンではフィルター filter:alpha(opacity=x) を使用します。x は 0 から 100 までの値を取ることができます。値が小さいほど透明度が高くなります。【おすすめコース:
CSSコース】ケースシェアリング
不透明度属性を使用して、迫り来る下向き矢印を作成します
この場合、CSS3 のアニメーション属性を使用して、アニメーションの値を設定することでアニメーションを指定する必要があります。実行時間と透明度のデザインはアニメーション プロセス中に変更されます。
<style> .box { -webkit-animation:box 5s infinite; -webkit-animation-fill-mode: both; } @-webkit-keyframes box { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body> <div class="box"> <img src="images/jiantou.png" alt="CSSスタイルで透明度を設定する方法" > </div> </body>レンダリングは次のとおりです。
概要: 上記は全体です。この記事の内容が皆様の学習のお役に立てれば幸いです。
以上がCSSスタイルで透明度を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。