重庆快乐十分开奖结果

[CSS]CSS应用:图像透明与不透明

时间:2019-12-18 17:29酷播云
[CSS]CSS应用:图像透明与不透明

[CSS]CSS应用:图像透明与不透明

CSS样式:

  1. img 
  2.   opacity:0.4; 
  3.   filter:alpha(opacity=40); /*  IE8 及其更早版本 */ 
  4. img:hover 
  5.   opacity:1.0; 
  6.   filter:alpha(opacity=100); /* IE8 及其更早版本 */ 

第一个CSS块是和例1中的代码类似。此外,我们还增加了当用户将鼠标悬停在其中一个图像上时发生什么。在这种情况下,当用户将鼠标悬停在图像上时,我们希望图片是清晰的。

此CSS是:opacity=1.

IE8和更早版本使用: filter:alpha(opacity=100).

当鼠标指针远离图像时,图像将重新具有透明度。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <style> 
  6. div.background 
  7.   width:500px; 
  8.   height:250px; 
  9.   background:url(https://www.runoob.com/images/klematis.jpg) repeat; 
  10.   border:2px solid black; 
  11. div.transbox 
  12.   width:400px; 
  13.   height:180px; 
  14.   margin:30px 50px; 
  15.   background-color:#ffffff; 
  16.   border:1px solid black; 
  17.   opacity:0.6; 
  18.   filter:alpha(opacity=60); /* IE8 及更早版本 */ 
  19. div.transbox p 
  20.   margin:30px 40px; 
  21.   font-weight:bold; 
  22.   color:#000000; 
  23. </style> 
  24. </head> 
  25.   
  26. <body> 
  27.   
  28. <div class="background"> 
  29. <div class="transbox"> 
  30. <p>这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。 
  31. </p> 
  32. </div> 
  33. </div> 
  34.   
  35. </body> 
  36. </html> 

 

热门文章推荐

请稍候...

酷播云数据统计分析跨平台播放器