aardio官方社区

 找回密码
 注册会员

QQ登录

只需一步,快速开始

搜索
aardio官方社区 门户 查看主题

HTMLayout 背景颜色半透明、渐变效果

发布者: 编程 | 发布时间: 2013-4-3 12:40| 查看数: 6747| 评论数: 3|帖子模式

HTMLayout支持CSS3的rgba颜色表示法,语法为:
background:rgba(red,green,blue,alpha ); 参数分别为
其中r,g,b 取值范围自0到255,而最后一位表过透明通道的alpha参数取值范围自0 到 1 之间.
也可以用一个单独的 opacity 属性表示透明度,例如:
  1. [lang=css,false]
  2. div {
  3.     background-color:red;
  4.     opacity :0.75;
  5. }
  6. [/lang]
复制代码
下面看完整的示例:
  1. [lang=aardio,false]
  2. import win.ui;
  3. /*DSG{{*/
  4. winform = ..win.form( bottom=389;right=599;text="背景色 半透明效果、渐变色" )
  5. winform.add(  )
  6. /*}}*/

  7. import web.layout;
  8. wbLayout = web.layout(winform);

  9. wbLayout.html =/***
  10. <html>
  11.   <head>
  12.     <style>
  13.     html { background: #FFFFFF; }
  14.     div { background-color:red; opacity :0.75; }
  15.     div.op25 { opacity :0.25; }
  16.     div.op50 { opacity :0.50; }
  17.     div.op75 { opacity :0.75; }
  18.     div.op100 { opacity:1.00; }
  19.     body { padding:11px; border:1px solid red;}
  20.     h1{ font-size:14px;}
  21.     </style>
  22.   </head>
  23.   <meta id="id_meta"></meta>
  24. <body>
  25.   <h1>opacity: 表示透明度演示</h1>
  26.   <div class=op25> opacity:0.25</div>
  27.   <div class=op50> opacity:0.50</div>
  28.   <div class=op75> opacity:0.75</div>
  29.   <div class=op100> opacity:1.00</div>
  30.   <h1>rgba(r,g,b,opacity) 表示颜色透明度演示</h1>  
  31.   <div style="background-color:rgba(255,0,0,0.25)"> background-color:rgba(255,0,0,0.25) </div>
  32.   <div style="background-color:rgba(255,0,0,0.50)"> background-color:rgba(255,0,0,0.50)</div>
  33.   <div style="background-color:rgba(255,0,0,0.75)"> background-color:rgba(255,0,0,0.75)</div>
  34.   <div style="background-color:rgba(255,0,0,1.0)"> background-color:rgba(255,0,0,1.0)</div>
  35.   <h1> rgba(r,g,b,opacity) 渐变背景色演示,用四组颜色分别表示左上,右上,右下,左下四角的渐变色(顺时针转一圈)</h1>  
  36.   <div style="background-color:rgb(255,0,0) rgba(255,0,0,0.15) rgba(255,0,0,0.15) rgb(255,0,0)"> background-color:rgb(255,0,0) rgba(255,0,0,0.15) rgba(255,0,0,0.15) rgb(255,0,0)</div>
  37.    
  38. </body>      
  39. </html>
  40. ***/

  41. winform.show()
  42. win.loopMessage();
  43. [/lang]
复制代码
运行效果截图:
bg.png

HTMLayout还可以使用四组十六进制( #RRGGBBOO ) 表示颜色

Red: 表示红色, 0x00...0xFF
Green: 表示绿色, 0x00...0xFF
Blue: 表示蓝色, 0x00...0xFF
Opacity:表示透明度, 0x00...0xFF


下面是演示代码:
  1. [lang=aardio,false]
  2. import win.ui;
  3. /*DSG{{*/
  4. winform = ..win.form( bottom=399;right=599;text="背景色 半透明效果" )
  5. /*}}*/

  6. import web.layout;
  7. wbLayout = web.layout( winform );

  8. wbLayout.html =/***
  9. <div id="test" > </div>
  10. ***/

  11. wbLayout.css = /**
  12. html{
  13.     background:url(http://bbs.aardio.com/static/image/common/logo.png) repeat;
  14. }

  15. #test{
  16.     width:300;
  17.     height:100%;
  18.     background:#0000FF30; //用四组十六进制( #RRGGBBOO ) 表示颜色
  19. }
  20. **/

  21. winform.show()
  22. win.loopMessage();
  23. [/lang]
复制代码
wbLayout.css = /**
html{
    background:url(http://bbs.aardio.com/static/image/common/logo.png) repeat;
}

#test{
    width:300;
    height:100%;
    background:#0000FF30; //用四组十六进制( #RRGGBBOO ) 表示颜色
}
**/

winform.show()
win.loopMessage();
[/quote]

最新评论

落伍者 发表于 2013-4-3 13:02:38

不错的特性

不错的特性
namwonsta 发表于 2013-4-3 15:36:46

谢谢。了解了。

谢谢。了解了。
伞` 发表于 2013-10-20 01:45:24

{:3_41:}{:3_41:}{:3_41:}{:3_41:}.....学习.学习.

.....学习.学习.

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2017-3-23 10:13 , Processed in 0.093750 second(s), 24 queries , Wincache On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表