css 情况全透明 元素(标识)情况全透明的css设计方

日期:2021-03-10 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

今日要设计方案1个精准定位在照片上的标识,标识的情况要有1定的全透明度,应用到了opacity的特性,以往没太留意这个特性的适配性难题,結果采坑了。。。
1.进行后的实际效果
进行前后左右的实际效果应当是这样的: 
情况全透明前                                                          情况全透明后 
  
tag一部分的html应当是这样的

拷贝编码
编码以下:

<div class="tag">
<span class="tag-bg"></span>
<span class="tag-font">拉萨</span>
</div>

tag一部分的css应当是这样的

拷贝编码
编码以下:

.tag-bg,.tag-font{position:absolute;left:0;bottom:7px;width:50px;height:23px;line-height:23px;font-size: 16px;font-family: "微软雅黑";color:#fff;padding:0 7px;}
.tag-bg{background: #5cbfed;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;}

这里提示下,假如只想情况全透明文本不全透明,那末1定要设计方案并列的两个span来各自界定款式。
从上面的编码中能够看出,tag-bg设定的opacity较为繁杂,做了多种多样适配性解决。
2.全透明度的适配性解决

拷贝编码
编码以下:

{
opacity:.7; /* 适用CSS3的访问器(FF 1.5也适用) 全透明度70%*/
filter:alpha(opacity=70);/* IE 全透明度70%*/
-moz-opacity:.7; /* Moz + FF 全透明度70%*/
}

上面的注解早已解释的很清晰了,假如你想做更深层次的掌握,那末你能够去互联网寻找更多有关的材料。
3.我的试验
上面是基础理论上的解释,你将会会感觉较为裂缝,好吧,大家来做测验,看看不一样访问器下究竟是如何的状况。
我的检测编码: 

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf⑻">
<title>全透明检测</title>
<style>
body{width: 960px;margin: 0 auto;}
div{width: 900px;margin: 0 auto;}
ul li{width: 200px;height: 200px;float: left;margin-right: 5px;background: #00f;color: #fff;list-style: none;padding: 5px;}
.set-opacity{opacity: .5;}
.set-filter{filter:alpha(opacity=50);}
.set-moz{-moz-opacity: .5;}
.set-all{opacity: .5;filter:alpha(opacity=50);-moz-opacity:.5;}
</style>
</head>
<body>
<div>
<ul>
<li class="set-opacity">opacity: .5;</li>
<li class="set-filter">filter:(opacity=50);</li>
<li class="set-opacity-filter">-moz-opacity: .5;</li>
<li class="set-all">opacity: .5;
filter:(opacity=50);
-moz-opacity:.5;</li>
</ul>
</div>
</body>
</html>

下面的各个图中,浅蓝色说明全透明度设定取得成功了,深蓝色表明不成功,表明访问器不鉴别里边的任何1种设定。
先看来看chrome下的状况: 
 

  能够看出,chrome鉴别opacity,不鉴别filter和-moz-opacity。

  IE9下:

  

  ie9较为给力,除鉴别filter,也能鉴别opacity,只是不鉴别独特的-moz-opacity。

  IE6,IE7,IE8下:  

  

  ie6、7、8下均只能鉴别filter。

  FF(16)下:  

  

我的ff16下能够适用opacity,可是不鉴别filter和-moz-opacity。
假如你有兴趣爱好,还能够将以上编码在更多的访问器上检测。
从上面的几种状况中早已能够发现了,后1种设定全透明度的方法早已能够适配了各种各样访问器。因此,我强烈推荐你应用这样的方法来设定全透明度。

上一篇:IE9下(table/div/照片)的垂直居中难题 返回下一篇:没有了