搜索
查看: 7684|回复: 3

[教程] HTMLayout 背景颜色半透明、渐变效果

[复制链接]

45

主题

707

帖子

3945

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3945
发表于 2013-4-3 12:40:09 | 显示全部楼层 |阅读模式
HTMLayout支持CSS3的rgba颜色表示法,语法为:
background:rgba(red,green,blue,alpha ); 参数分别为
其中r,g,b 取值范围自0到255,而最后一位表过透明通道的alpha参数取值范围自0 到 1 之间.
也可以用一个单独的 opacity 属性表示透明度,例如:

  1. div {
  2.     background-color:red;
  3.     opacity :0.75;
  4. }
复制代码
下面看完整的示例:

  1. import win.ui;
  2. /*DSG{{*/
  3. winform = ..win.form( bottom=389;right=599;text="背景色 半透明效果、渐变色" )
  4. winform.add(  )
  5. /*}}*/

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

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

  40. winform.show()
  41. win.loopMessage();
复制代码
运行效果截图:
bg.png

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

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


下面是演示代码:

  1. import win.ui;
  2. /*DSG{{*/
  3. winform = ..win.form( bottom=399;right=599;text="背景色 半透明效果" )
  4. /*}}*/

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

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

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

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

  20. winform.show()
  21. win.loopMessage();
复制代码
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]
再好的编程语言到了不会用的人手里,都会变成恶魔,不幸的是 - 不会用的是大多数。
回复

使用道具 举报

117

主题

1279

帖子

6802

积分

六级会员

Rank: 9Rank: 9Rank: 9

积分
6802
发表于 2013-4-3 13:02:38 | 显示全部楼层

不错的特性

不错的特性
回复

使用道具 举报

5

主题

87

帖子

477

积分

二级会员

Rank: 3Rank: 3

积分
477
发表于 2013-4-3 15:36:46 | 显示全部楼层

谢谢。了解了。

谢谢。了解了。
回复

使用道具 举报

1

主题

5

帖子

125

积分

一级会员

Rank: 2

积分
125
发表于 2013-10-20 01:45:24 | 显示全部楼层

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

.....学习.学习.
回复

使用道具 举报

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

GMT+8, 2017-9-20 01:10 , Processed in 0.046875 second(s), 24 queries , Wincache On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

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