ccsの透明属性と背景の透明継承方法の例を詳しく解説

透明度は Web ページに優れた視覚効果を生み出すことができます。まず、主流のブラウザーと互換性のある CSS 透明度コードを紹介します。

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

上記のプロパティは次のとおりです。
opacity: 0.5; これが最も重要です。このプロパティは Firefox、Safari、Opera をサポートします。
filter:alpha(opacity=50); これは IE6 に設定され、可能な値は 0 ～ 100、他の 3 つは 0 ～ 1 です。 : 0.5; これは、一部の古いバージョンの Mozilla ブラウザをサポートするためのものです。
-khtml-opacity: 0.5; これは、いくつかの古いバージョンの Safari ブラウザをサポートするためです。
CSS の透明度の継承の問題
ただし、CSS の透明度プロパティには、親要素に透明度が設定されている場合、子要素に透明度 1 を指定した場合でも、子要素は自動的にその透明度を継承します。は無効となります。
サブ要素がテキストである場合、解決策は一般的に、それがまだはっきりと見える限りそのままにしておきます。もう 1 つの妥協策は、テキスト サブ要素に比較的暗い色を割り当てることです。つまり、子要素が透明度を継承すると、結果として得られるテキストの色はまさに希望どおりになります。前提として、この色はまだ濃くなる可能性があり、色と透明度の値を詳細に計算する必要があります。
「透明性の継承をキャンセルする」という言葉もありますが、これはあまり正確ではありませんが、私が個人的に知る限り、透明性の継承をキャンセルする方法はありません。 「複数の要素を覆い、指定した要素だけを透明にする」ということを実現したいときに使えるHackがいくつかあるとしか言えません。
検索した結果、この効果を実現する良い方法を見つけました。興味のある友人は見てください。原理は非常に簡単で、空の要素を透明なレイヤーとして追加し、透明にはしたくないがカバー効果を実現する必要がある要素を兄弟要素とします。親要素は、position:relative を使用して配置され、2 つの子要素は、position:absolute を使用して配置され、カバレッジを実現します。
html コード:

<p class="p3"><p class="p4"></p>这里文字图片都没透明度了 
<p class="p2">图片</p> 
</p>

CSS コード

body { 
background-image: url(./105247.png); 
background-repeat: repeat; 
} 
.p2{ width:100px; height:100px; background: url(./testbok.png)} 
.p3{ width:200px; height:200px; position:relative; margin-top:10px} 
.p4{  position:absolute; top:0; height:200px; width:200px; z-index:-1; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}

外側のコンテナの高さが可変の場合は、p3 の高さを十分な高さに設定するだけです

この方法には非常に悪い欠点があります: 空白の p が 1 つ増えます

以上がccsの透明属性と背景の透明継承方法の例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。