ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3 不透明度を実装するための完全なコード
CSS3 不透明度を実装するための完全なコード
- 高洛峰オリジナル
- 2017-03-20 10:45:282702ブラウズ
透明度を設定するには?不透明度属性を定義します。この属性を設定すると、任意の要素を半透明にすることができます。
値の説明:
1,
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チュートリアル(8): CSS3 Trans保護者ガイド
以上がCSS3 不透明度を実装するための完全なコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。