视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

[html5]css透明度问题opacity或者alpha设定

时间:2017-03-13 15:30酷播
[html5]css透明度问题opacity或者alpha设定，Html/Css标签透明度效果的实现,在html中，实现半透明背景

 [html5]css透明度问题opacity或者alpha设定

Html/Css标签透明度效果的实现,在html中，实现半透明背景

  1. <html> 
  2.     <head> 
  3.         <meta charset="utf-8"> 
  4.         <title>Opacity</title> 
  5.         <meta http-equiv="X-UA-Compatible" content="IE=7,chrome=1.0"> 
  6.  
  7.         <style type="text/css" rel="stylesheet"> 
  8.             *{ 
  9.                 padding: 0px; 
  10.                 margin:0px; 
  11.             } 
  12.             .mainbox{ 
  13.                 width: 200px; 
  14.                 height: 200px; 
  15.                 clear: both; 
  16.                 overflow: hidden; 
  17.                 margin: 100px auto 0px auto; 
  18.                 background-color: #f06; 
  19.             } 
  20.             .sub-mainbox 
  21.             { 
  22.                 width: 250px; 
  23.                 height: 200px; 
  24.                 margin: -50px auto 0px auto; 
  25.                 border:1px solid white; 
  26.                 border-radius: 5px; 
  27.                 /**background-color:rgb(0,152,50);**/ 
  28.                 background:url(path/my_bg.jpg) no-repeat center center scroll; 
  29.                 opacity: 0.7; 
  30.                 filter:alpha(opacity=70); 
  31.             } 
  32.         </style> 
  33.     </head> 
  34.     <body> 
  35.  
  36.         <div class="mainbox"> 
  37.              
  38.         </div> 
  39.  
  40.         <div class="sub-mainbox"> 
  41.              
  42.         </div> 
  43.  
  44.     </body> 
  45. </html> 

Html/Css标签透明度效果的实现,在html中，实现半透明背景

热门文章推荐

请稍候...

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

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