aardio官方社区

 找回密码
 注册会员

QQ登录

只需一步,快速开始

搜索
查看: 6549|回复: 3

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

[复制链接]

45

主题

708

帖子

3950

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3950
发表于 2013-4-3 12:40:09 | 显示全部楼层 |阅读模式
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]
再好的编程语言到了不会用的人手里,都会变成恶魔,不幸的是 - 不会用的是大多数。
回复

使用道具 举报

117

主题

1280

帖子

6807

积分

六级会员

Rank: 9Rank: 9Rank: 9

积分
6807
发表于 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-2-20 23:41 , Processed in 0.217733 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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