Get the App
SLTechnology News&Howtos  ›  Development  › 

Css implements translucent code sharing

Shulou Source: shulou.com Published: 2022-06-03 17:53:23 11月13日 Update

This article focuses on "css to achieve translucent code sharing", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "css to achieve translucent code sharing"!

The basics of DIVCSS translucency introduce setting DIV translucent CSS code:

Div {filter:alpha (Opacity=80);-moz-opacity:0.5;opacity:0.5;}

Description:

1. Filter: set the translucent filter effect on winIE. Filter:alpha (Opacity=80) represents 80% translucency of the object, which is not recognized by Firefox.

2.-moz-opacity: translucent to mozillafirefox Firefox browser. WinIE does not recognize this attribute.-moz-opacity:0.5 is equivalent to setting translucency to 50%.

3. Opacity: support for all browsers except IE, including Google. Finally, it is mainly for Google browser. Opacity:0.5; indicates that 50% translucency is set.

In order to observe the translucent implementation of DIV, we set up two DIV layers, one in the other DIV layer, the outer DIV named ".div-a", and the included layer CSS class named ".div-b" to form a ".div-b" box in ".div-a".

We set a background for the underlying DIV to be a picture, and the DIV box above sets the village black.

CSS translucent style instance is not set

According to the described example, the translucent HTML source code is not set:

Online performance of translucent examples

.div-a {background:url (div-a-bg.png) no-repeat;width:230px;height:136px;padding:10px;}

. div-b {background:#000;width:200px;height:100px;padding:5px;color:#F00}

Demonstration of DIV translucency example

At this point, I believe you have a deeper understanding of "css to achieve translucent code sharing". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Tags: Code example browser browsing content Firefox box learning practical deeper two representation interest picture foundation outer layer practicality actual object property Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Shulou Information vpn Apple Linux Huawei