How to use CSS to achieve translucent background effect? Do the activity page may encounter to do background translucent effect, we generally practice is to use two layers, one for the text, the other for the transparent background, because the effect of the transparent filter will affect the content.
However, if you only need to implement in IE, using CSS to achieve transparency there are many scenarios, here is just a general approach to introduce you:
1. . Transparent_class {
2. Filter:alpha (OPACITY=50);//Standard CSS transparency, in most of the standard browsers Firefox, Safari, and opera are valid
3. opacity:0.5;//compatible IE solution
4. -moz-opacity:0.5;//old Mozilla browsers such as Netscapenavigator. There's almost no need to
5. -khtml-opacity:0.5;//compatible with the old Safari (1.x) version, very few can be used without
6. }
Knowing how CSS changes transparency, it's easy to use JavaScript to dynamically change transparency:
1.
2.
3. <title></title>
4. <metahttp-equiv= "Content-type" content= "Text/html;charset=utf-8" >
5. <style>
6. div{width:100px;height:100px;background-color:red}
7. </style>
8. <script>
9. window.onload =function () {
var mydiv = document.getElementById ("Transparent_div");
Mydiv.onclick =function () {
MyDiv.style.opacity = ". 4";//For all common browsers
MyDiv.style.filter = "alpha (opacity=40)";//for IE browser
. }
. }
</script>
<body>
<divid= "Transparent_div" >this istransparent div</div>
</body>
21.
jquery changes the transparency implemented as follows:
1. $ ("#transparent_div"). CSS ({ opacity:.4});
It's also easy to animate with jquery:
1. $ ("#transparent_div"). Click (function () {
2. $ ("#transparent_div"). Animate ({
3. opacity:.4
4. },1000,function () {
5. alert ("Animation complete");
6. });
7. });
Source: http://front.anyforweb.com/newsDetail69.shtml
Change the transparency of a picture with jquery
The following example shows how you can change the transparency of a project. Use the hover () function to set the transparency style when the mouse is over the tab.
HTML code
- <! DOCTYPE HTML>
- <html>
- <head>
- <script type="Text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4 /jquery.min.js "></script>
- <script text="Text/javascript">
- Const out_opacity = 0.4;
- Const over_opacity = 1.0;
- $ (function () {
- $ ("Div#minigallery img"). CSS ("opacity", out_opacity)
- . Hover (
- function () {
- $ (this). Animate ({opacity:over_opacity});
- },
- function () {
- $ (this). Animate ({opacity:out_opacity});
- }
- );
- });
- </Script>
- </head>
- <body>
- <div id="Minigallery">
- <img src="http://helpexamples.com/flash/images/image1.jpg" width= " /> "
- <img src="http://helpexamples.com/flash/images/image2.jpg" width= " />"
- <img src="http://helpexamples.com/flash/images/image3.jpg" width= " /> "
- </div>
- </body>
- </HTML>
Change transparency in CSS with JavaScript or jquery