【CSS語法】Opacity 圖片半透明變色效果

woff

範例預覽： http://www.flycan.com/flycancss/opacity.htm


1. 樣式部份設定如下：

1. <style type="text/css">
   
2. 
   
3. <!--
   
4. 
   
5. .gg a:link img {
   
6. 
   
7. opacity: .6; /* 透明度60% FireFox 的寫法 */
   
8. 
   
9. filter: Alpha(Opacity=60); /* 透明度60% IE 的寫法 */
   
10. 
    
11. }
    
12. 
    
13. .gg a:visited img {
    
14. 
    
15. opacity: .6;
    
16. 
    
17. filter: Alpha(Opacity=60);
    
18. 
    
19. }
    
20. 
    
21. .gg a:hover img {
    
22. 
    
23. opacity: 1; /* 透明度100% FireFox 的寫法 */
    
24. 
    
25. filter: Alpha(Opacity=100); /* 透明度100% IE 的寫法 */
    
26. 
    
27. }
    
28. 
    
29. -->
    
30. 
    
31. </style>
    

複製代碼

2. 網頁上的圖片部份設定如下：

1. 
   
2. <div align="center" class="gg">
   
3. 
   
4. <a href="#"><img src="DSCN3076.jpg" width="220" height="202" border="0"></a>
   
5. 
   
6. <a href="#"><img src="DSCN3646.jpg" width="220" height="202" border="0"></a>
   
7. 
   
8. <a href="#"><img src="DSCN3740.jpg" width="220" height="202" border="0"></a>
   
9. 
   
10. </div>
    

複製代碼

琏粲旺

不错的~~! 感谢您提供

芳禾炳学

我喜欢啊，请继续 支持你

步步莲花

  这是什么？