ホームページ >ウェブフロントエンド >htmlチュートリアル >CSSで透明度を設定する方法
仕事ではCSSコードを使ってDIVの透明度を設定することがよくありますが、今日はCSSスタイルシートを使ってDIVの透明度や半透明度を設定する方法を紹介します。皆さんのお役に立てれば幸いです。
まず、DIV の半透明を設定するための CSS コードについて説明します:
div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}手順:
1. フィルター: Win IE の半透明フィルター効果を設定します。 filter:alpha(Opacity=80) はオブジェクトの 80% の半透明を表します。 Firefox ブラウザーは認識しません
2. -moz-opacity: mozilla Firefox ブラウザーの半透明度を実現します。 -moz-opacity:0.5 は、半透明度を 50% に設定することと同等です3。 , 不透明度: Google を含む IE 以外のすべてのブラウザをサポートします。最後のものは主に Google Chrome 用です。不透明度: 0.5; 50% の半透明度を設定することを意味します DIV 半透明度の実装を観察するために、2 つの DIV レイヤーを設定します。 1 つは別の DIV レイヤーにあり、外側の DIV は「.div-a」という名前で、上に含まれるレイヤーCSS クラス は「.div-b」という名前で、「.div-b」ボックスを形成し、「」に配置されます。 .div-a" では、下にある DIV の背景を画像に設定し、その上の DIV ボックスを黒に設定します。
1. 説明されている例によれば、半透明の HTML ソース コードは設定されていません:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>半透明实例在线演示 www.divcss5.com</title>
<style>
.div-a{ background:url(div-a-bg.png) no-repeat;width:230px;height:136px;padding:10px;}
.div-b{ background:#000;width:200px;height:100px;padding:5px;color:#F00}
</style>
</head>
<body>
<div class="div-a">
<div class="div-b">DIV半透明实例演示</div>
</div>
</body>
</html>
1. 半透明のスタイル コードを「.div-b」セレクターに追加します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>半透明实例在线演示 www.divcss5.com</title>
<style>
.div-a{ background:url(div-a-bg.png) no-repeat;width:230px;height:136px;padding:10px}
.div-b{ background:#000;width:200px;height:100px;padding:5px;color:#F00;
filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6}
/* CSS注释说明：这里对CSS代码换行是为了让代码在此我要中显示完整，换行后CSS效果不受影响 */
</style>
</head>
<body>
<div class="div-a">
<div class="div-b">实现DIV半透明实例演示</div>
</div>
</body>
</html> 概要: 上記の例によると、最初のコードは設定されていませんdiv の半透明性を実現するには、必要に応じて半透明度の値を調整して、必要な半透明性を実現できます。ただし、IE、Google、Firefox、およびその他のブラウザーでは半透明効果を考慮する必要があることに注意する必要があります。 . は互換性がありサポートされているため、半透明のスタイル コードは完全である必要があり、欠落することはできません。 関連記事:
IE 6、7、8 の透明性に関する互換性問題を解決する方法
css: box-shadow の透明度を設定するにはどうすればよいですか?
css: テーブルの border-collapse 属性と TD ボーダーの不透明度の透明度の詳細な説明
以上がCSSで透明度を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。