CSSスタイルで透明度を設定する方法-CSSチュートリアル-php.cn

CSSスタイルで透明度を設定する方法

清浅

リリース： 2021-04-18 14:49:16

オリジナル

6158 人が閲覧しました

CSS スタイルで透明度を設定する方法: 最初に HTML サンプルファイルを作成し、次に img を使用して画像を作成します。最後に、「opacity: value|inherit;」などの構文を使用して、CSS の不透明度属性を使用して透明度を設定します。」。

CSSスタイルで透明度を設定する方法

#この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、HTML5&&CSS3 バージョン。

CSS では、opacity 属性を追加することで要素の透明度を変更できます。opacity の値は 0 ～ 1 です。値が小さいほど透明度が高くなります。

ページ内で CSS を使用することが多いです。スタイルの 1 つを使用して、透明度を設定し、ページを美しくします。今日は、CSS で不透明度属性を使用する方法を紹介します。これは、参考になると思います。

不透明度属性

opacity: value|inherit;

ログイン後にコピー

値: 不透明度の設定に使用されます。 0.0 (完全に透明) から 1.0 (完全に不透明)

#inherit: 不透明度属性の値は親要素から継承する必要があります

CSSスタイルで透明度を設定する方法 #例:

画像を不透明に設定します

<body>
未设置透明度：
<img  src="images/5.jpg"   style="max-width:90%" alt="CSSスタイルで透明度を設定する方法" >
设置了透明度：
<img  src="images/5.jpg"   style="max-width:90%" alt="CSSスタイルで透明度を設定する方法" >
</body>

ログイン後にコピー

レンダリングは次のとおりです:

CSSスタイルで透明度を設定する方法 #注:

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スタイルで透明度を設定する方法