您好!欢迎进入紫石头原创模板堂!
网站首页 | 购买流程 | 关于我们 |  联系方式 |  客服热线:0371-56789-390
当前位置:首页 >> 建站知识 >> 详情
扫二维码关注紫石头原创模板堂 4大优势
  • NO.1

    模板类网站比起独立设计的网站来讲价格低的多,因为很多东西是已经做成的,成本就低很多!

  • NO.2

    开源模板网站,任意修改使用!服务好到没话说!模板建站经常被贴上服务差的标签,而紫石头完全打破这样的格局!

  • NO.3

    模板网站也有正规军!我们做的模板网站有永易搜CMS终身使用授权,正版系统、无惧侵权!

  • NO.4

    建站速度快,购买后简单修改即可投入使用。设计型网站正常需要10~20个工作日,而模板站只需要几个小时!

建站咨询电话
0371-56789-390

css让元素半透明的最兼容写法
发表:紫石头原创模板堂    发表时间:2016-09-12 11:42:48    阅读:250

我们知道让元素半透明,要同时使用4个css,不要只写opacity:0.50,这样兼容性会很差;四种写法如下:

filter:alpha(opacity=50);  /*支持 IE 浏览器*/

-moz-opacity:0.50; /*支持 FireFox 浏览器*/

-khtml-opacity: 0.5; /*webkit内核浏览器*/

opacity:0.50;  /*支持 Chrome, Opera, Safari 等浏览器*/


当然,有时候半透明也可以用jquery来做,可能只需要一句代码就可以了。


技巧学习:

对某样式设置半透明,会影响到他的子元素,所以如果需要外层半透明,内层不透明是办不到的。透明度会相乘,例如外层透明度0.5,内层想写成不透明1,最终得到的结果是透明度0.5。


方案一:可以用position:absolute,做一上一下两个层,这样就等于分了两个层可以写不一样的样式。

方案二:用CSS的background-color: rgba(0,0,0,0.7);也可以实现背景半透明,单只是兼容IE9以上版本(CSS3是可以设置rgba的)。

html代码:


<div class="rgba">1. 这里是父元素半透明子元素不透明的效果<p>我是子元素文字</p>
</div>
<div class="opacity">2. 这里是父元素半透明子元素也半透明的效果<p>我是子元素</p>
</div>


CSS代码:
body{background-color: red;}
div{width: 300px;height: 200px;color: #fff;}
div.rgba{background-color: rgba(0,0,0,0.7);}
div.opacity{background-color:#000;filter:alpha(opacity=70);-moz-opacity:0.70;-khtml-opacity:0.7;opacity: 0.7;margin-top: 20px;}
模板推荐
工作时间:周一至周五(08:30~18:00)
Copyright ©2003-2022 zishitou.com All Rights Reserved 永易搜旗下紫石头原创模板堂 版权所有 豫ICP备14011598号-7 营业执照