CSSの透過プロパティ（コード）の詳細説明

この記事では、css の透明プロパティの詳細な説明と、背景の透明性の継承を解決するためのハックを紹介します。css の透明な背景を使用している場合、この記事は多くの非互換性の問題を解決するのに役立ちます。

透明性により、多くの場合、非互換性の問題が発生する可能性があります。優れた web ページの視覚効果を実現するには、まず主流のブラウザと互換性のある css 透過コードを提供します。

コードは次のとおりです。

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

上記の属性

opacity: 0.5; これは css 標準であるため、最も重要です。このプロパティは、firefox、safari、opera をサポートしています。

filter:alpha(opacity=50) ; これは ie6 用に設定されており、可能な値は 0 ～ 100 で、他の 3 つは 0 ～ 1 です。

-moz-opacity:0.5; これは、一部の古いバージョンのモジラブラウザ。

-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 が存在します。

上記はcss 透明プロパティ (コード) の詳細説明の詳細な内容です。さらに詳しく知りたい場合は、php 中国語 web サイトの他の関連記事にも注目してください。