视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > 酷播云 >

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

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

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

CSS样式：

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

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

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

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