The meaning and function of background:transparent in CSS

Transparent is transparent, in fact background the default color is the Transparent property
General usage Scenarios:
If an element is covered by another element and you want to display the following element, you need to set the background of the element above to transparent

Sometimes when I look at CSS, I see some CSS properties defined as background:transparent. It means the background is transparent. In fact, the background default color is the Transparent property. So write and do not write is the same has a period of time did not write the article, has been in school, although with computers, but can not surf the Internet Ah! Recently in the use of JavaScript to write a web version of the operating system, write a certain hair, write the process encountered a lot of problems, many are details, very troublesome, But I have been working hard to solve, but also to their own kind of improvement. Let me tell you a little bit about a problem I've been having lately. You know, you use createelement to create a new div, by default the Backgroungcolor property in the style of this div is transparent, hehe, if I do a div mask, then see the following section of code: Copy the code code as follows:

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

This is the setting for many mask Div, which means that the user is shielded from manipulating other elements on the Web page. We mainly look at the next two lines of code, the front is not already said, Div's default BackgroundColor property is transparent, that is, is transparent, then we have to superfluous to set a black (this does not matter, casually set a color, As long as it is not transparent, and cannot be an empty string, the browser will default to the empty string as transparent), and set the filter to make him transparent. I did the experiment myself, and at first I was puzzled by the test results, but I found out the difference, if we don't have the last two sentences of the above code, then we can operate on the elements after the mask, that is, the function of shielding, but this operation is limited, Specifically, we can only operate on elements that have focus, such as text, pictures, buttons, and so on, and I'll give you an example: Copy the code code as follows:

<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. By the way, the event of this element that BackgroundColor is transparent is intercepted by the element it obscures. If the object we're triggering has no focus, The event is then exchanged for transparent element processing and bubbling by this element, otherwise the focus event is handled by the focused object, is not exchanged, and bubbles by the element with focus. (seemingly not very good understanding, you can do more tests on their own to understand) set the style to transparent color Sometimes, the above-written copy code code is as follows: Background:inherit; Then the following may be to clear the background, the copy code is written as follows: Background:transparent; Transparent background, that is, if an element is overwritten by another element, and you want to display the following element, you need to set the background of the above element to transparent

Create a new div with createelement, by default the Backgroungcolor property in the style of this div is transparent, hehe, if I make a div mask, then look at the following section of code:
This is the setting for many mask Div, which means that the user is shielded from manipulating other elements on the Web page.
We mainly look at the next two lines of code, the front is not already said, Div's default BackgroundColor property is transparent, that is, is transparent, then we have to superfluous to set a black (this does not matter, casually set a color, As long as it is not transparent, and cannot be an empty string, the browser will default to the empty string as transparent), and set the filter to make him transparent.
I did the experiment myself, and at first I was confused about the test results, but I found out the difference in my own mind, if we don't have the last two sentences of the above code, then we can operate on the elements behind the mask, that is, the action of shielding, but this operation is limited, Specifically, we can only operate on elements that have focus, such as text, pictures, buttons, and so on, and I'll give you an example:
Normally, whenever you click anywhere in this div, you'll be alert, But when it is obscured by an element that is backgroundcolor for transparent, we only have to click 123 to alert because the text is focusable and the other elements are the same. By the way, The event that the backgroundcolor element is transparent is intercepted by the element it obscures. If the object that we are triggering has no focus, then the event is exchanged for the element processing of the transparent and bubbled up by this element. Otherwise, the focus event is handled by the object that has focus, does not swap, and bubbles by the element with focus. (seemingly not very good understanding, you can do more experiments on their own to understand)