Skip to content

Commit 1114447

Browse files
cloudAicloudAi
committed
完善 rgba 全兼容半透明示例
1 parent aa53aba commit 1114447

1 file changed

Lines changed: 89 additions & 2 deletions

File tree

‎cnDocs/solutions/rgba-opacity.html‎

Lines changed: 89 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,59 @@
8585
text-decoration: none;
8686
cursor: pointer;
8787
}
88+
89+
90+
.rgbabox {
91+
margin: 10px 0;
92+
border: 1px solid #fff;
93+
position: relative;
94+
}
95+
.rgbabox p{
96+
position: absolute;
97+
z-index: 2;
98+
height: 75px;
99+
top: 93px;
100+
font-size: 24px;
101+
}
102+
.rbox,
103+
.box1, .box2, .box3, .box4, .box5{
104+
display: inline-block;
105+
width: 15%;
106+
height: 60px;
107+
margin: -50px 10px 0 0;
108+
padding: 20px 10px 0;
109+
border: 1px solid #ddd;
110+
position: relative;
111+
z-index: 3;
112+
font-weight: bold;
113+
_margin-top: -35px;
114+
}
115+
116+
.rbox {
117+
border-color: #fff;
118+
z-index: 1;
119+
height: 35px;
120+
background: url(images/pencil.jpg) top center no-repeat;
121+
}
122+
.rgbabox .rbox {
123+
margin-top: 0;
124+
}
125+
126+
.box1 { background-color: rgba(255, 255, 255, .8); filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#ccffffff, endColorstr=#ccffffff); }
127+
.box2 { background-color: rgba( 0, 0, 0, .5); filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#7f000000, endColorstr=#7f000000); color: #fff;}
128+
.box3 { background-color: rgba(255, 0, 0, .4); filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#66ff0000, endColorstr=#66ff0000); }
129+
.box4 { background-color: rgba( 0, 255, 0, .3); filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#4c0ff000, endColorstr=#4c00ff00); }
130+
.box5 { background-color: rgba( 0, 0, 255, .2); filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#330000ff, endColorstr=#330000ff); }
131+
132+
/*
133+
_background: #fff;
134+
_background: #000;
135+
_background: #f00;
136+
_background: #0f0;
137+
_background: #00f;
138+
139+
*/
140+
88141
</style>
89142
</head>
90143
<body>
@@ -201,20 +254,54 @@ <h3>最新式的半透明效果实现</h3>
201254
}
202255

203256
说明：#88000000 的前两位数字控制透明度，取值16进制从00 -> FF（越小越透明），00表示完全透明，FF就是全不透明，后面六位是色值。
204-
205257
</pre>
258+
206259
<h4>知识扩展：</h4>
207260
<p>DXImageTransform.Microsoft.gradient 滤镜里的 startColorstr 参数值是 #AARRGGBB 形式的， 其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的 RRGGBB 就是颜色的十六进制代码。</p>
208261
<p>举例如：background: rgba(125, 0, 0, .3); 表示的是30%不透明度的红色背景。把30%的不透明度转换成十六制呢的方法如下：先计算#AA的的十进制x，x/255 = 3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4C。 </p>
209262

210263
<h4>常用透明度对用关系：</h4>
211-
<p style="font-family: sans-serif;">
264+
<p style="font-family: courier new">
212265
.0（00） .1（19） .05（0C） .15（26） <br>
213266
.2（33） .3（4C） .25（3F） .35（59） <br>
214267
.4（66） .5（7F） .45（72） .55（8C） <br>
215268
.6（99） .7（B2） .65（A5） .75（BF） <br>
216269
.8（CC） .9（E5） .85（D8） .95（F2）
217270
</p>
271+
<div class="demo">
272+
<div class="rgbabox">
273+
<p>全兼容半透明测试，五种颜色及透明度。设置背景图片作为陪衬对比，增强浏览效果。</p>
274+
<span class="rbox"></span>
275+
<span class="rbox"></span>
276+
<span class="rbox"></span>
277+
<span class="rbox"></span>
278+
<span class="rbox"></span>
279+
<span class="box1">颜色：白<br>透明度：.8</span>
280+
<span class="box2">颜色：黑<br>透明度：.5</span>
281+
<span class="box3">颜色：红<br>透明度：.4</span>
282+
<span class="box4">颜色：绿<br>透明度：.3</span>
283+
<span class="box5">颜色：蓝<br>透明度：.2</span>
284+
</div>
285+
</div>
286+
<pre class="prettyprint linenums">
287+
.box1 { background-color: rgba(255, 255, 255, .8);
288+
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#ccffffff, endColorstr=#ccffffff); }
289+
.box2 { background-color: rgba( 0, 0, 0, .5);
290+
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#7f000000, endColorstr=#7f000000); color: #fff;}
291+
.box3 { background-color: rgba(255, 0, 0, .4);
292+
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#66ff0000, endColorstr=#66ff0000); }
293+
.box4 { background-color: rgba( 0, 255, 0, .3);
294+
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#4c0ff000, endColorstr=#4c00ff00); }
295+
.box5 { background-color: rgba( 0, 0, 255, .2);
296+
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#330000ff, endColorstr=#330000ff); }
297+
298+
针对Win7下的IEtester中IE6不透明，可在滤镜前单独设置 _background 色，如下：
299+
.box5 {
300+
background-color: rgba( 0, 0, 255, .2);
301+
_background: #00f;
302+
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#330000ff, endColorstr=#330000ff);
303+
}
304+
</pre>
218305

219306
<h3>问题及注意事项：</h3>
220307
<p>实践出真知</p>

0 commit comments

Comments
 (0)