CSS3 之 颜 色 与 半 透 明

任平生

CSS 2.1

• opactiy:0.5• filter:alpha(opacity=50)

• #FF0000• rgb(255,0,0)

filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50)

.demo{background:green;opacity:0.5;filter:alpha(opacity=50);}

RGBA

Red Green

Blue Alpha

color : rgba(255, 0, 0, 0.5)

RGBA

浏览器支持

• Chrome• Firefox 3+ • Safari 3+ (Mobile Safari)

• Opera 10+• Internet Explorer 9

http://css-tricks.com/rgba-browser-support/

2008/09

2008/06

2007/10

2008/12

2011/03

RGBA 应用 ——背景色

Internet Explorer

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#AARRGGBB,endColorstr=#AARRGGBB);

#AARRGGBB

AA : 00~FF

例： #7F00FF00

http://msdn.microsoft.com/en-us/library/ms532997(v=VS.85).aspx

.demo{background:rgba(0,128,0,0.5);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F008000,endColorstr=#7F008000);

}

<div class="slide"><img src="lotus.jpg" alt=" 莲 " /><div class="slide_mask"></div><p class="slide_txt"><a href="#" title=""> 中通外

直不蔓不枝香远益清亭亭净植 </a></p></div>

焦点图

<div class="slide"><img src="lotus.jpg" alt=" 莲 " /><p class="slide_txt"><a href="#" title=""> 中

通外直不蔓不枝香远益清亭亭净植 </a></p></div>

.slide .slide_txt{width:100%;position:absolute;bottom:1em;background:rgba(0,0,0,.5);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);}

HTML

CSS

焦点图

RGBA 应用 ——边框

透明边框

.pop_layer{background:#fff;border:2px solid #808080;border:20px solid rgba(0,0,0,.5);border-radius:20px;

}

透明边框<div class="pop_layer">

《蜀道难》：乐府旧题，属 " 相和歌辞 · 瑟调曲 " 中的调名，内容多写蜀道的艰险。</div>

HTML

CSS

透明边框

问题：边框是实色而非透明

http://www.planabc.net/2008/04/14/background-clip_background-origin/

background-clip

background-clip: [ border-box | padding-box | content-box]-moz-background-clip: [border | padding]

.pop_layer{background:#fff;-moz-background-clip:padding;background-clip:padding-box;border:2px solid #808080;border:20px solid rgba(0,0,0,.5);border-radius:20px;

}

透明边框<div class="pop_layer">

《蜀道难》：乐府旧题，属 " 相和歌辞 · 瑟调曲 " 中的调名，内容多写蜀道的艰险。</div>

HTML

CSS

注意：圆角值要大于或等于边框的宽度值否则 Chrome 中将会悲剧

透明边框

HSL & HSLA

HSLA

Hue 衍生于色盘： 0 和 360 是红色，接近 120 的是绿色， 240 是蓝色。

Saturation 值是一个百分比： 0% 是灰度， 100% 饱和度最高

Lightness 值也是一个百分比： 0% 是最暗， 50% 均值， 100% 最亮。

Alpha 透明，介于 0~1 之间的数字

http://css-tricks.com/examples/HSLaExplorer/

HSLA 写法

color : hsla(0, 100%, 100%, 1)

浏览器支持状况与 RGBA 基本一致

HSLA 应用

.nav li a{ background:brown;

background:hsla(34,85%,35%,1); }

.nav li:nth-child(2) a{ background:hsla(34,85%,45%,1); }

.nav li:nth-child(3) a{ background:hsla(34,85%,55%,1); }

.nav li:nth-child(4) a{ background:hsla(34,85%,65%,1); }

层级导航

CSS

一些链接

• CSS 方案进展http://www.w3.org/Style/CSS/current-work

• CSS3 HTML5 浏览器支持状况http://www.findmebyip.com/litmus/

• GReader Shared Feedhttp://go.rpsh.net/gr-css3http://go.rpsh.net/gr-css

rpsh.net@rpsh

Thanks !