ホームページ > 記事 > ウェブフロントエンド > CSS_html/css_WEB-ITnose で div の背景の透明度を設定する方法
CSS_html/css_WEB-ITnose で div の背景の透明度を設定する方法
- WBOYオリジナル
- 2016-06-24 11:36:471799ブラウズ
互換性の高い 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 までご連絡ください。