CSSでの背景:透明の説明

この記事では、CSSのbackground:transparentについての説明を主に紹介します。これを必要とする友人に共有します。

CSSの透明とはどういう意味ですか? ,これは何に使われますか?、この記事で詳しく説明しますので、必要な友達は参考にしてください

時々、CSSを見ると、いくつかのCSS属性がbackground:transparentとして定義されているのを目にします。背景が透明になるという意味です。実際、背景のデフォルト色は透明属性です。なので、書くか書かないかは同じです。私は学校に通っていますが、現在 JavaScript を使用しています。オペレーティング システムの Web バージョンを作成するために、完成したら必ず投稿します。作成プロセス中に多くの問題に遭遇しましたが、その多くは詳細で非常に面倒でした。それらを解決することは、私自身にとって一種の改善でもあります。
ご存知のとおり、この p のスタイルには、createelement を使用します。はは、p のマスクを作成する場合は、次のコードを見てください:

p.style.position="absolute"; 
p.style.width=document.body.clientWidth+"px"; 
p.style.height=document.body.clientHeight+"px"; 
p.style.left="0px"; 
p.style.top="0px"; 
p.style.zIndex="2000"; 
p.style.backgroundColor="black"; 
p.style.filter="alpha(opacity="+0+");";

これは大量のマスクです。ボード p の設定は、ユーザーが Web ページ上の他の要素を操作できないようにすることを意味します。

主にコードの最後の 2 行を見ていきます。前に述べたように、p のデフォルトのbackgroundcolor 属性は透明ですが、なぜわざわざ黒を設定するのでしょうか (問題ではありません。色を設定するだけです)。透明でない限り、空の文字列であってはなりません。ブラウザはデフォルトで空の文字列を透明として扱います)、それを透明にするためのフィルターを設定します
私は自分でテストをしましたが、混乱していました。最初はテスト結果を確認しましたが、落ち着いて考えてみると、上のコードの最後の 2 つの文がない場合、要素を操作することができます。つまり、その違いがわかりました。シールド効果はありませんが、この操作は制限されています。具体的には、テキスト、画像、ボタンなどのフォーカスされた要素に対してのみ操作できます。例を示します。

<p style="border:1px red solid;width:100px;height:100px" onclick="alert(1)">123</p>

通常の状況では、この p の任意の場所をクリックするとアラートが表示されますが、背景色が透明の要素で覆われている場合は、テキストがフォーカスを取得できるため、アラートが表示されます。これは他の要素にも当てはまります。ちなみに、背景色が透明な要素のイベントは、その要素によって覆われた要素によってインターセプトされます。トリガーしたオブジェクトにフォーカスがない場合、イベントは処理のために透明な要素に交換され、この要素を押します。それ以外の場合、フォーカスされたイベントは交換せずにフォーカスされたオブジェクトによって処理され、バブルはフォーカスされた要素に従って実行されます (あまり理解しにくいようですが、自分でもっと実験できます。わかりました)

言う。これは、誰もが理解していることですが、これが最後の 2 つの文が必要な理由です。この方法でのみ、Web ページの要素を完全に保護できます。
スタイルを透明色に設定します
上記では、

background:inherit;

と書かれていることがあります。背景をクリアする必要があるかもしれないので、

background:transparent;

透明な背景、つまり

要素が別の要素を覆い、下の要素を表示したい場合は、上記を変更する必要があります要素の背景を書きました透明に設定してください
この記事の内容は IE7.0 でテストされ、合格しました。

上記がこの記事の全内容です。みんなの勉強 その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

タグの CSS スタイルの 4 つの状態

CSS Border属性solidの使い方の紹介

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