CSS は背景を透明にし、テキストを不透明にします (すべてのブラウザと互換性があります)-CSSチュートリアル-php.cn

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

巴扎黑

リリース： 2017-04-05 16:27:51

オリジナル

1684 人が閲覧しました

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>