ホームページ  >  記事  >  ウェブフロントエンド  >  CSSスタイルで透明度を設定する方法

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

清浅
清浅オリジナル
2018-12-06 11:11:576147ブラウズ

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。