CSS で背景を透明にし、テキストを不透明にする方法の例

いくつかの Web ページをデザインして作成するとき、まず PNG 画像処理を使用することを考えるかもしれません。もちろん、これは ie6 での唯一の互換性の問題ですが、これは良い方法です。も難しいことはなく、jsの処理を追加するだけです。ただし、ログイン ボックス、登録ボックス、プロンプトなどの半透明のマスク ポップアップ レイヤーが必要な場合、背景タイルが使用されている場合は、ページ全体を半透明のマスク レイヤーで覆う必要がある場合があります。現時点では、これは良い考えではない可能性があります。画像が大きいと、ページ上のレンダリングの計算量も増加します。

次のような例があるとします。「DIV ブロックがあります。この DIV は黒で半透明ですが、この DIV 内のコンテンツはそのままにしておく必要があり、透明にすることはできません。」では、どうすればよいでしょうか。

HTML部分をこのように書くと

<div class="touMingDiv">  
    <div>  
        <h1>这是透明的层这是透明的层这是透明的层这是透明的层  
            这是透明的层这是透明的层这是透明的层这是透明的层这是透明的层  
        </h1>  
    </div>  
    <p>  
        这是透明的层,但上边的文字和图片均不透明，兼容ie7,ie8,ie9,ie10,FF,Chrome  
    </p>  
    <img src="bg.jpg"/>  
</div>

CSSについては、次のように書くかもしれません

.touMingDiv{  
    filter:Alpha(opacity=60);  
    opacity:0.6;  
}

しかし、テストした結果、divコンテナだけでなく、div内のテキストや画像も半透明であることがわかりました透明化しました。この効果は、これらのフィルターのプロパティが子要素に継承されているために発生します。

次のメソッドを使用して

.touMingDiv{  
    width:800px;  
    min-height:300px;  
    color:#fff;  
    background:rgba(0,0,0,0.6);  
    background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/  
    filter:Alpha(opacity=60);/*只对ie7,ie8有效*/  
}  
.touMingDiv p,  
.touMingDiv div,  
.touMingDiv img{  
    position:relative;  
    /*或者是absolute，都可以使文字不透明，这样做还是为了  
    兼容ie9,ie8,ie7下背景透明而而背景上的文字不透明的效果*/  
}

を実現できます

上記の background:rgba(0,0,0,0.6) は、ie6 を除く、ie9、ie10、FF、Chrome... などでのみ有効であることに注意してください。 . IE7、IE8 なので、次の数行のコードがあります:

background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/  
filter:Alpha(opacity=60);/*只对ie7,ie8有效*/

さらに、背景を透明にし、背景上のテキストと画像を表示できるように、子要素に相対属性または絶対属性を設定する必要があります。正常に表示されるようになります。

ただし、ここでのコードは ie6 には絶対に適していません。ie6 では png 画像を使用し、それを js で処理することをお勧めします。

以上がCSS で背景を透明にし、テキストを不透明にする方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。