CSS は背景を透明にし、テキストを不透明にします (すべてのブラウザと互換性があります)

FF/Chrome などの新しいブラウザでは、css 属性の background-color の rgba を使用して、テキストは不透明のままで背景を透明にすることが簡単に実現できます。 IE6/7/8 ブラウザは rgba をサポートしておらず、IE の専用フィルター filter:Alpha を使用することでしか実現できません。ただし、この書き方では文字も透明になるため、 の子ノード内でのみ使用できます。透明なコンテナ (テキスト ノードを除く)。親要素の透明度フィルターを継承しないように設定します。コードは次のとおりです。

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">
頭 >
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> title>Web开公開者网络 - www.admin10000.comtitle> スタイルタイプ ="text/css">.warp
{background:#eee url(back.jpg) no-repeat left top;幅: 440px;高さ:400px; border:1px ソリッド #ccc;}.content
{幅: 180px;高さ:260px;マージン:0px auto;パディング:30px 0px;背景: rgba(255, 255, 255, 0.6)!重要;filter:Alpha(opacity=60);background:#fff; /* IEの背景を透明にするためにIE専用フィルターを使用します */ }
.content p{position:relative;} /*でIE textを実現*/
スタイル>
頭>
ボディ>
p class="ワープ">
p class="コンテンツ">p&g Admin10000.comは、WEB 開発者が学び、コミュニケーションをとるために必須の Web サイトです。 Admin10000.com は、WEB 開発者が学び、コミュニケーションをとるために必須の Web サイトです。 Admin10000.com は、WEB 開発者が学び、コミュニケーションをとるために必須の Web サイトです。 Admin10000.com は、WEB 開発者が学び、コミュニケーションをとるために必須の Web サイトです。 Admin10000.com は、WEB 開発者が学び、コミュニケーションをとるために必須の Web サイトです。 Admin10000.com は、WEB 開発者が学び、コミュニケーションをとるために必須の Web サイトです。 p>p>
p>
ボディ >
html>

上記のコードは IE6.0+/FF3.0+/Opera10+/Chrome/Safari でテストされ、合格しました

以上がCSS は背景を透明にし、テキストを不透明にします (すべてのブラウザと互換性があります)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。