Introduction and function of background:transparent in css

Sometimes when you look at CSS, you see that some CSS properties are defined as background:transparent. It means the background is transparent. In fact, the default color of the background is the transparent attribute.

For example, if an element covers another element and you want to display the lower element, then you need to set the background of the upper element to transparent.

Recommended manual:css online manual

The following introduces the role of background:transparent in css

1. Introduction to background

background is a shorthand attribute used to set all background attributes in one statement.

Possible values:

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

For example,

background : transparent none repeat scroll 0% 0%

respectively represents

Background attributes: background color, background image, whether the background is repeated, the background scrolls with the browser when the background is repeated Flat position background vertical position

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

Explanation of the above CSS

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

Recommended related articles: ​ ​
1. What does background mean in CSS? Detailed explanation of background usage
2.How to use the transparent attribute to set transparency in css? Draw various triangles with transparent attribute (code example)
Related video tutorials:
1.CSS Video Tutorial-Jade Girl Heart Sutra Edition

2. The role of background:transparent in css

Events of elements whose backgroundcolor is transparent will be intercepted by the elements covered by it. If the object we trigger does not focus, then the event will be exchanged to the transparent element for processing and bubbled according to this element. Otherwise, the event with focus will be processed by the object with focus, without exchange, and bubbled according to the element with focus

1. For example, the following div mask, this function can shield users from operating other elements on the web page.

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

Mainly depends on the last two lines of code. If we do not have the last two sentences of the above code , then we can operate on the masked elements, which means that it will not have a shielding effect, but this operation is limited. Specifically, we can only operate on focused elements, such as text and pictures. , buttons, etc.

2. For example, the following DIV

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

Under normal circumstances, as long as you click anywhere on this div, it will alert. But when it is covered by an element with a background color of transparent, We can only alert if we click 123, because the text can get focus, and the same goes for other elements.

The above is the detailed content of Introduction and function of background:transparent in css. For more information, please follow other related articles on the PHP Chinese website!