CSSのbackground:transparentの意味と機能

透明とは透明を意味します。実際、背景のデフォルトの色は透明属性です。
一般的な使用シナリオ: 要素が別の要素を覆い、下の要素を表示したい場合は、上の背景を変更する必要があります。要素は透明に設定されています

時々、CSS を見ると、いくつかの CSS プロパティが、background:transparent として定義されているのを見かけます。背景が透明になるという意味です。実際、背景のデフォルトの色は透明属性です。なので、しばらく記事を書いていないのですが、パソコンはあるのですが、今はJavaScriptを使って書いています。ウェブ版のオペレーティング システムです。完成したら必ず投稿します。作成中に多くの問題に遭遇しましたが、その多くは詳細で非常に面倒でした。しかし、それらを解決するために一生懸命取り組んできました。これは私自身の一種の改善でもありますが、ご存知のとおり、この div のスタイルの backgroungcolor 属性は透明です。 div のマスクを作成します。次のコードを参照してください。 コードをコピーすると、コードは次のようになります。

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

これは、マスクされた div には多くの設定があり、ユーザーがその div 上で他の要素を操作できないようにすることを意味します。 Web ページでは、主にコードの最後の 2 行を確認します。前述したように、div のデフォルトのbackgroundcolor 属性は透明ですが、なぜわざわざ黒を設定する必要があるのでしょうか (黒ではありません)。問題は、透明でない限り色を設定するだけで、空の文字列にすることはできません。ブラウザはデフォルトで空の文字列を透明として扱います）、それを透明にするフィルターを設定しました。私は自分で実験をしました。最初はテスト結果に混乱しましたが、落ち着いて考えてみると、上記のコードの最後の 2 つの文がなければ、要素を操作できることがわかりました。つまり、シールド効果はありませんが、この操作は制限されており、具体的には、テキスト、画像、ボタンなどのフォーカスされた要素に対してのみ操作できます。例を示します。次のコードをコピーします。

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

通常、この div のどこかをクリックするとアラートが表示されますが、背景色が透明の要素で覆われている場合は、123 をクリックした場合にのみアラートを表示できます。テキストがフォーカスを取得できるためです。他の要素についても同様です。ちなみに、背景色が透明なこの要素のイベントは、トリガーしたオブジェクトにフォーカスがない場合、その要素によってインターセプトされます。それ以外の場合、フォーカスされたイベントは、交換することなく、フォーカスのあるオブジェクトによって処理され、フォーカスされた要素に従ってバブルされます (あまり理解しにくいようですが、自分で行うことができます)。もう少し実験してみるとわかります） スタイルを透明色に設定する場合、上記のコピーコードは次のようになります。 : 背景: 透明; 透明 背景が削除され、次の要素を表示したい場合は、上の要素の背景を透明に設定する必要があります

新しい div を作成するには、createelement を使用します。デフォルトでは、この div のスタイルの backgroungcolor 属性は透明です。笑、div のマスクを作成する場合は、次のコードを参照してください:

これは多くのマスク div の設定です。他の要素を操作する
前に述べたように、div のデフォルトのbackgroundcolor 属性は透明ですが、なぜ必要なのでしょうか。黒を設定する追加の手順に進みます (何でも構いません)。色を設定します。透明でない限り、空の文字列にすることはできません。ブラウザはデフォルトで空の文字列を透明として扱います)。 、フィルターを設定して透明にします
私も実験してみましたが、最初は大丈夫でした テスト結果は非常に混乱しましたが、落ち着いて考えてみると、違いがわかりました。上記のコードの最後の 2 つの文がある場合、マスクされた要素を操作できます。これは、シールド効果がないことを意味しますが、この操作は、具体的には、テキストなどのフォーカスされた要素に対してのみ操作できます。写真、ボタンなど。例を示します。
通常、この div のどこかをクリックすると警告が表示されますが、背景色が透明の要素で覆われている場合は、警告が表示されるのは次の場合のみです。 123 をクリックします。テキストがフォーカスを取得できるため、他の要素にも同じことが当てはまります。ちなみに、この背景色は透明です。トリガーするオブジェクトが存在しない場合、要素のイベントはその要素によってインターセプトされます。フォーカスがある場合、イベントは処理のために透明な要素に交換され、この要素に従ってバブルされます。それ以外の場合、フォーカスのあるイベントはフォーカスのある要素によって発行され、フォーカスされたオブジェクトは交換されずに処理され、バブルはこの要素に従って実行されます。焦点を当てた要素 (理解するのは簡単ではないようですが、もっと実験すれば理解できるでしょう)

以上がCSSのbackground:transparentの意味と機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。