Introduction to backgroundcolor = "Transparent" in CSS"

I haven't written an article for a while. I have been at school. I can't access the Internet even though I have a computer! I recently used JavaScript to write a webpage version of the operating system. It must have been written. Many of the problems encountered during the writing process are detailed and troublesome, however, I have been trying to solve this problem, but it is also a kind of improvement for myself. next, let me talk about a problem I encountered recently.

As you know, you use createelement to create a div. By default, the backgroungcolor attribute in the style of this div is transparent. If I make a div mask, see the following code:

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 a lot of settings for the masked Div, that is, Shielding users from other elements on the web page.

We mainly look at the following two lines of code. I have already mentioned above. The default backgroundcolor attribute of div is transparent, that is, transparent, so why do we need to set a black image? (it doesn't matter, just set a color. As long as it's not transparent, it cannot be a Null String, the browser regards the Null String as transparent by default, and sets the filter to make it transparent.

I did the experiment by myself. At the beginning, I was still confused about the test results. But when I calmed down and thought about the differences, I found the difference. If we didn't have the last two sentences of the above Code, then we can operate on the elements after the mask, that is to say, it does not play a blocking role, but this operation is limited, specifically, we can only operate on elements with focus, such as text, images, and buttons. For example:

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

Under normal circumstances, as long as you click any position of this Div, it will be alert, but when it is covered by an element whose backgroundcolor is transparent, we will only click 123 to see alert, because text can get focus, the same is true for other elements. by the way, events with the backgroundcolor being a transparent element will be intercepted by the elements it blocks. if the triggered object has no focus, the event will be exchanged to the transparent element for processing and bubbling based on this element. Otherwise, the event with focus will be processed by the focused object, do not swap, and bubble by focused elements. (it seems that it is not easy to understand. You can do more experiments on your own to understand)

In this case, you can understand that this is also the reason for the last two sentences. Only in this way can you completely block the webpage elements.

Please correct me if there is anything wrong with this article. The content of this article has passed the test under ie7.0.