ホームページ  >  記事  >  ウェブフロントエンド  >  CSS_html/css_WEB-ITnose で div の背景の透明度を設定する方法

CSS_html/css_WEB-ITnose で div の背景の透明度を設定する方法

WBOY
WBOYオリジナル
2016-06-24 11:36:471784ブラウズ

互換性の高い CSS を使用して div 背景の透明度を設定する方法:

推奨: 可能な限りコードを手書きすることで、学習の効率と深さを効果的に向上させることができます。

オブジェクトの透明度の設定は、多くの Web ページの特殊効果で役立ちます。唯一の難点は、主要な主流ブラウザとの互換性を保つ方法です。ここでは、この効果を実現する方法について簡単に説明します。 。コード例は次のとおりです。

rrree

上記のコードは、さまざまなブラウザと互換性があります。透明効果のコードは次のとおりです:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title> <style type="text/css"> *{   margin:0px;   padding:0px; } .opacity{   width:150px;   height:150px;   background-color:green;   filter:alpha(opacity=50);   -moz-opacity:0.5;   opacity:0.5;   margin-left:20px;   margin-top:20px; } span{   display:block;   width:80px;   height:80px; } </style> </head> <body>   <div class="opacity">      <span>蚂蚁部落</span>    </div> </body> </html>

コードの最初の行は IE ブラウザでのみ有効です。
コードの 2 行目は、FF ブラウザの古いバージョンをサポートしています。実際、古いバージョンのブラウザはほとんど使用されないため、削除しても問題ありません。
3 行目はすべての主要なブラウザをサポートできますが、IE6 ~ IE8 ブラウザはサポートしていません。
特記事項:
背景は透明ですが、div 内のテキストも透明になります。これは、多くの場合、希望どおりではありません。「div の透明度を設定するが、その中のテキストが不透明になる方法」の章を参照してください。この問題を解決します。

元のアドレス: http://www.softwhy.com/forum.php?mod=viewthread&tid=4680

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