Skip to content

Commit f87f16b

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

1 file changed

Lines changed: 67 additions & 1 deletion

File tree

‎cnDocs/solutions/rgba-opacity.html‎

Lines changed: 67 additions & 1 deletion
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>
@@ -170,6 +223,19 @@ <h3>最新式的半透明效果实现</h3>
170223
<i>具有半透明背景的文字，文字过长也不要紧的哦，布局良好！</i>
171224
</a>
172225
</div>
226+
<div class="rgbabox">
227+
<p>全兼容半透明测试，五种颜色及透明度。设置背景图片作为陪衬对比，增强浏览效果。</p>
228+
<span class="rbox"></span>
229+
<span class="rbox"></span>
230+
<span class="rbox"></span>
231+
<span class="rbox"></span>
232+
<span class="rbox"></span>
233+
<span class="box1">颜色：白<br>透明度：.8</span>
234+
<span class="box2">颜色：黑<br>透明度：.5</span>
235+
<span class="box3">颜色：红<br>透明度：.4</span>
236+
<span class="box4">颜色：绿<br>透明度：.3</span>
237+
<span class="box5">颜色：蓝<br>透明度：.2</span>
238+
</div>
173239
</div>
174240
<pre class="prettyprint linenums">
175241
.text-cover {
@@ -208,7 +274,7 @@ <h4>知识扩展：</h4>
208274
<p>举例如：background: rgba(125, 0, 0, .3); 表示的是30%不透明度的红色背景。把30%的不透明度转换成十六制呢的方法如下：先计算#AA的的十进制x，x/255 = 3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4C。 </p>
209275

210276
<h4>常用透明度对用关系：</h4>
211-
<p style="font-family: sans-serif;">
277+
<p style="font-family: courier new">
212278
.0（00） .1（19） .05（0C） .15（26） <br>
213279
.2（33） .3（4C） .25（3F） .35（59） <br>
214280
.4（66） .5（7F） .45（72） .55（8C） <br>

0 commit comments

Comments
 (0)