ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSスタイルで透明度を設定する方法
CSSスタイルで透明度を設定する方法
- 清浅オリジナル
- 2018-12-06 11:11:576209ブラウズ
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。