CSS での背景:透明の紹介と機能

CSS を見ると、background:transparent として定義されている CSS プロパティがいくつかあることがあります。背景が透明になるという意味です。実際、背景のデフォルトの色は透明属性です。

たとえば、要素が別の要素を覆い、下の要素を表示したい場合は、上の要素の背景を透明に設定する必要があります。

推奨マニュアル: cssオンラインマニュアル

以下は、cssのbackground:transparentの役割を紹介します

1、backgroundの概要

backgroundは、1つのステートメントですべての背景プロパティを設定するために使用されます。 。

可能な値:

background-color
background-image
background-repeat
background-attachment
background-position

たとえば、

background : transparent none repeat scroll 0% 0%

はそれぞれ

背景属性: 背景色、背景画像、背景、背景を繰り返すかどうか、ブラウザでスクロールするかどうか、背景、フラット位置、背景、垂直位置を表します

background : background-color || background-image || background-repeat || background-attachment || background-position

上記CSSの解説

transparent   表示透明无颜色，是background-color 的默认值
none   表示没有设置背景图片
repeat   表示图片重复
scroll   表示背景图片随浏览器下拉而滚动
0%   水平位置在x0
0%   垂直位置在y0

おすすめ関連記事：
1. CSS における背景とは何ですか?背景の使い方を詳しく解説
2.cssで透明度を設定するtransparent属性の使い方は？透明属性でさまざまな三角形を描画する (コード例)
関連ビデオチュートリアル:
1.CSSビデオチュートリアル-翡翠少女般若心経編

2. CSSにおけるbackground:transparentの役割

backgroundcolor透明である 要素のイベントは、その要素によってカバーされる要素によってインターセプトされます。トリガーしたオブジェクトにフォーカスがない場合、イベントは処理のために透明な要素に交換され、この要素に従ってバブルされます。フォーカスのある要素はフォーカスのある要素によって出力され、フォーカスされたオブジェクトは処理され、交換されず、フォーカスされた要素に従ってバブルされます。たとえば、次の div マスクでは、この関数はユーザーの操作をシールドできます。 Web ページ上の他の要素

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+");";

主に次の 2 行のコードを見てください。上記のコードの最後の 2 文がない場合は、マスクの後の要素を操作できます。シールド効果はありませんが、この操作は制限されています。具体的には、テキスト、画像、ボタンなどのフォーカスされた要素のみを操作できます。

2. たとえば、次の DIV

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

通常、この div のどこかをクリックするとアラートが表示されますが、背景色が透明の要素で覆われている場合にのみアラートを生成できます。 123 をクリックします。テキストはフォーカスを取得できるため、他の要素にも同じことが当てはまります。

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