The introduction and role 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 background default color is the Transparent property. For example, if an element is covered by another element and you want to display the following element, then you need to set the background of the above element transparent. The following describes the role of background:transparent in CSS

First, the introduction of background

Background is a shorthand property that is used to set all background properties in a declaration.

Possible values:

Background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position

For example

Background:transparent None repeat scroll 0% 0%

represented separately

Background properties: Background color background picture background whether repeat background with browser scrolling background flat position background vertical position

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

Explanation of the above CSS

Transparent indicates transparent no color, is the default value of Background-color
None indicates that no background picture is set
Repeat indicates duplicate picture
Scroll indicates that the background picture scrolls with the browser drop-down
0% horizontal position in x0
0% Vertical position in y0

Second, the role of background:transparent in CSS

An event that backgroundcolor an element that is transparent is intercepted by an element that is obscured by it. If the object that we are triggering has no focus, then the event is exchanged to transparent's element processing and bubbled up by this element. Otherwise, the focus event is handled by the focused object, does not swap, and bubbles by the element with focus

1, such as the following a Div mask, the function of the implementation of blocking the user to the other elements on the page to operate.

div.style.position= "Absolute";d iv.style.width=document.body.clientwidth+ "px";d iv.style.height= document.body.clientheight+ "px";d iv.style.left= "0px";d iv.style.top= "0px";d iv.style.zindex= "2000"; Div.style.backgroundcolor= "BLACK";d iv.style.filter= "alpha (opacity=" +0+ ");";

Mainly look at the following two lines of code, if we do not have the last two sentences of the above code, then we can operate on the elements after the mask, that is, the role of shielding, but this operation is limited, specifically, we can only focus on the elements to operate, such as text, pictures, buttons and so on.

2. For example, the following Div

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

Normally, whenever you click anywhere in this div, it will be alert, but when it is obscured by a backgroundcolor element, we only have to click 123 to alert because the text is focusable, The same is true of other elements.