aardio官方社区

 找回密码
 注册会员

QQ登录

只需一步,快速开始

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

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

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

HTMLayout支持CSS3的rgba颜色表示法,语法为:
background:rgba(red,green,blue,alpha ); 参数分别为
其中r,g,b 取值范围自0到255,而最后一位表过透明通道的alpha参数取值范围自0 到 1 之间.
也可以用一个单独的 opacity 属性表示透明度,例如:

  源代码 [ CSS ]

div { 
    background-color:red; 
    opacity :0.75; 
}
下面看完整的示例:

  源代码 [ aardio ]

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

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

wbLayout.html =/*** 
<html>
  <head>
    <style>
    html { background: #FFFFFF; }
    div { background-color:red; opacity :0.75; }
    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;}
    h1{ font-size:14px;}
    </style>
  </head>
  <meta id="id_meta"></meta>
<body>
  <h1>opacity: 表示透明度演示</h1>
  <div class=op25> opacity:0.25</div>
  <div class=op50> opacity:0.50</div>
  <div class=op75> opacity:0.75</div>
  <div class=op100> opacity:1.00</div>
  <h1>rgba(r,g,b,opacity) 表示颜色透明度演示</h1>  
  <div style="background-color:rgba(255,0,0,0.25)"> background-color:rgba(255,0,0,0.25) </div>
  <div style="background-color:rgba(255,0,0,0.50)"> background-color:rgba(255,0,0,0.50)</div>
  <div style="background-color:rgba(255,0,0,0.75)"> background-color:rgba(255,0,0,0.75)</div>
  <div style="background-color:rgba(255,0,0,1.0)"> background-color:rgba(255,0,0,1.0)</div>
  <h1> 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)"> background-color:rgb(255,0,0) rgba(255,0,0,0.15) rgba(255,0,0,0.15) rgb(255,0,0)</div>
    
</body>       
</html>
***/
 
winform.show() 
win.loopMessage();
运行效果截图:
bg.png

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

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


下面是演示代码:

  源代码 [ aardio ]

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

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

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

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();
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-2-20 23:54 , Processed in 0.150571 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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