The meaning and function of background:transparent in css

Transparent means transparent. In fact, the default color of the background is the transparent attribute.
General usage scenarios:
If an element covers another element and you want to display the following element, then You need to set the background of the above element to transparent

Sometimes when I look at css, I see some css attributes defined as background:transparent. It means the background is transparent. In fact, the default color of the background is the transparent attribute. So writing or not writing is the same thing. I haven’t written an article for a while. I have been in school. Although I have a computer with me, I can’t access the Internet! I am currently using JavaScript to write a web version of the operating system. I will definitely post it when I finish it. I encountered many problems during the writing process, many of which were detailed and troublesome. However, I have been working hard to solve them, which is also a kind of improvement for myself. Now let me talk about a problem I encountered recently. As you know , you use createelement to create a new div. By default, the backgroungcolor attribute in the style of this div is transparent. Haha, if I make a mask for a div, then please see the following code: Copy the 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+");";

These are the settings of many masked divs, which means that users are shielded from operating other elements on the web page. We mainly look at the last two lines of code. As we have already mentioned, the default backgroundcolor attribute of div is transparent, that is is transparent, so why do we bother to set a black (it doesn’t matter, just set a color as long as it is not transparent, and it cannot be an empty string, the browser will treat the empty string as transparent by default), and set The filter made it transparent. I did the experiment myself. I was confused by the results at first, but after I calmed down and thought about it, I discovered the difference. If we didn’t have the last two sentences of the above code, then we could Operating on masked elements means that it does not have a shielding effect, but this operation is limited. Specifically, we can only operate on focused elements, such as text, pictures, buttons, etc. I For example: Copy the code as follows:

<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 only have The alert will only occur when you click 123, because the text can get focus, and the same goes for other elements. By the way, the event of this element with a background color of transparent will be intercepted by the element covered by it. If the object we trigger If there is no 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.( It doesn’t seem to be easy to understand, you can understand it by doing more experiments) When setting the style to a transparent color, sometimes the copy code written above is as follows: background:inherit; Then below, you may need to clear the background, so I wrote the copy code. The code is as follows: background:transparent; Transparent background, that is, removing the background. If one element covers another element, and you want to display the following element, then you need to set the background of the above element to transparent

Use createelement to create a new div. By default, the backgroungcolor attribute in the style of this div is transparent. Haha, if I make a mask for a div, then please see the following code:
This is There are many settings for masked divs, which means that users are shielded from operating other elements on the web page.
We mainly look at the last two lines of code. As mentioned before, the default backgroundcolor attribute of div is transparent, which is Transparent, then why do we need to go to the trouble of setting a black (it doesn’t matter, just set a color as long as it is not transparent, and it cannot be an empty string, the browser will treat the empty string as transparent by default), and set the filter The mirror made it transparent.
I did the experiment myself. I was confused by the results at first, but after I calmed down and thought about it, I discovered the difference. If we don’t have the last two sentences of the above code, then we You can operate on masked elements, which means that it does not have a shielding effect, but this operation is limited. Specifically, we can only operate on focused elements, such as text, pictures, buttons, etc. , Let me give you an example:
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 Text can get focus, and the same goes for other elements. By the way, the event of this element with a transparent background color will be intercepted by the element covered by it. If the object we trigger does not have focus, the event will be swapped Process the transparent element and bubble according to this element. Otherwise, the event with focus will be processed by the object with focus, without exchange, and bubble according to the element with focus. (It seems not very easy to understand, but it can You will understand after you do more experiments)

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