Home > Developer > Web Develop
div translucent implementation, using CSS to achieve a semi-transparent div, CSS implementation layer and background translucent effect.
Set div Translucent CSS code:
Description
1,filter: Set the translucent filter effect on win IE, Filter:alpha (opacity=80) represents the object 80% translucent, Firefox browser does not recognize
2,-moz-opacity: the Mozilla Firefox browser to achieve translucency, win IE do not recognize this attribute,-moz-opacity:0.5 equivalent to set the translucency 50%
3,opacity: all browsers except IE support including Google, put the last mainly for Google Browser, opacity:0.5; set 50% Translucent
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title>No translucent effect</title> </Head> <Bodystyle= "Background-image:url" (.. /1 parallax scrolling/images/bg1.png); "> <DivID=""style= "Width:700px;height:600px;background-color:black;">No Translucent effect</Div> </Body></HTML>
Effect:
Second, set the translucent effect:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title>has a translucent effect</title> </Head> <Bodystyle= "Background-image:url" (.. /1 parallax scrolling/images/bg1.png); "> <DivID=""style= "Width:700px;height:600px;background-color:black;filter:alpha (opacity=60);-moz-opacity:0.6;opacity:0.6; Color:red ">has a translucent effect</Div> </Body></HTML>
Effect:
div Translucent Layer CSS for Web page background translucency
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
