css扩展之不透明度,渐变透明设置(opacity)

By admin at 2017-11-13 • 0人收藏 • 598人看过
<html>
  <head>
    <style>
    html { background: url(images/sand.gif) repeat; }
    div { background-color:red; }
    div.op25 { opacity :0.25; }
    div.op50 { opacity :0.50; }
    div.op75 { opacity :0.75; }
    div.op100 { opacity:1.00; }
    body { padding:11px; border:1px solid red;}
    </style>
  </head>
  <meta id="id_meta"></meta>
<body>
  <h1>opacity:</h1>
  <div class=op25> 0.25</div>
  <div class=op50> 0.50</div>
  <div class=op75> 0.75</div>
  <div class=op100>1.00</div>
  <h1>color opacity rgba(r,g,b,opacity)</h1>  
  <div style="background-color:rgba(255,0,0,0.25)"> 0.25</div>
  <div style="background-color:rgba(255,0,0,0.50)"> 0.50</div>
  <div style="background-color:rgba(255,0,0,0.75)"> 0.75</div>
  <div style="background-color:rgba(255,0,0,1.0)">1.00</div>
  <h1>gradient color opacity rgba(r,g,b,opacity)</h1>  
  <div style="background-color:rgb(255,0,0) rgba(255,0,0,0.15) rgba(255,0,0,0.15) rgb(255,0,0)">grad</div>
    
</body>       
</html>

blob.png

登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前正在学aardio+halcon机器视觉.
Sciter中文在线文档Sciter在线学习文档
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
C大Aardio论坛:Aar爱好者论坛
简码教程网:简码编程
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...