The explanation of background:transparent in CSS

This article mainly introduces the background:transparent of the CSS in the explanation, has a certain reference value, now share to everyone, the need for friends can refer to

What exactly does the transparent in CSS mean? Always feel very strange, what is the use of AH?, this article will be described in detail, the need for friends can refer to the following

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 it's the same for writing and not writing.
There is a period of time did not write the article, has been in the school, although with the computer, 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 of them are details, very troublesome, but they have been working hard to solve, It is also a kind of improvement to oneself. Let me take a look at a problem I have recently encountered.
You know, you use createelement to create a new p, by default, this P's style of the Backgroungcolor property is transparent, hehe, if I do a P mask, then see the following section of code:

p.style.position= "Absolute"; p.style.width=document.body.clientwidth+ "px"; p.style.height=document.body.clientheight+ "px"; p.style.left= "0px"; p.style.top= "0px"; P.style.zindex= "2000"; P.style.backgroundcolor= "BLACK"; P.style.filter= "Alpha (opacity=" +0+ ");";

This is the setting for many mask p, which means that the user is shielded from manipulating other elements on the Web page.
We mainly look at the following two lines of code, the front is not already said, P'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:

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

Normally, whenever you click anywhere on this p, it will be alert, but when it is obscured by an element that backgroundcolor is transparent, 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 experiments on their own to understand)
In this way, we understand that this is why the latter two sentences, the only way to completely block the page elements.
Set style to Transparent color
Sometimes, the above is written

Background:inherit;

Then you might want to clear the background and write

Background:transparent;

Transparent background, that is, remove the
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
The article has the wrong place also invites you to correct, this article content in ie7.0 under the test passes.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!

Related recommendations:

Four states in the CSS style of a tag

Introduction to the use of the solid of CSS border properties