CSS3 不透明度を実装するための完全なコード-CSSチュートリアル-php.cn

CSS3 不透明度を実装するための完全なコード

高洛峰

リリース： 2017-03-20 10:45:28

オリジナル

2683 人が閲覧しました

透明度を設定するには?不透明度属性を定義します。この属性を設定すると、任意の要素を半透明にすることができます。

|inherit

値の説明:

1, は、浮動小数点数とユニット識別子で構成される長さの値です。負の値は指定できません。デフォルト値は 1 です。不透明度の値が 1 の場合、要素は完全に不透明になり、値が 0 の場合、要素は完全に透明になり、見えなくなります。

2. Inherit は継承、つまり親要素の不透明度を継承することを意味します。

3. IE ブラウザの場合、互換性を保つためにそのプライベート属性フィルターを使用できます: filter: alpha (alpha=value);。

例: ライトボックス広告背景布のデザイン

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>opacity</title>  
<style type="text/css">  
body {   
    margin:0;   
    padding:0;   
}   
p { position:absolute; }   
.bg {   
    width:100%;   
    height:100%;   
    background:#000;   
    opacity:0.7;   
    filter:alpha(opacity=70);   
}   
.lightbox {   
    left:50px;   
    top:50px;   
}   
</style>  
</head>  
  
<body>  
<p class="web"><img  src="images/web_bg_9.jpg"    style="max-width:90%"  style="max-width:90%" / alt="CSS3 不透明度を実装するための完全なコード" ></p>  
<p class="bg"></p>  
<p class="lightbox"><img  src="images/web_bg_10.png"    style="max-width:90%" / alt="CSS3 不透明度を実装するための完全なコード" ></p>  
</body>

ログイン後にコピー

デモレンダリング:

CSS3 不透明度を実装するための完全なコード