css让元素半透明的最兼容写法

 时间:2024-10-15 13:47:06

1、我们知道让元素半透明,要同时使用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来做,可能只需要一句代码就可以了。

2、技巧学习:对某样式设置半透明,会影响到他的子元素,所以如果需要外层半透明,内层不透明是办不到的。透明度会相乘,例如外层透明度0.5,内层想写成不透明1,最终得到的结果是透明度0.5。正确思路:可以用position:absolute,做一上一下两个层。另外,用CSS的background-color: rgba(0,0,0,0.7);也可以实现背景半透明,单只是兼容IE9以上版本(CSS3是可以设置rgba的)。

css让元素半透明的最兼容写法

3、html代码:<body> <div class="rgba"> 1. 这里是父元素半透明子元素不透明的效果 <p>我是子元素文字</a> </div> <div class="opacity"> 2. 这里是父元素半透明子元素也半透明的效果 <p>我是子元素</a> </div></body>

4、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;}这样就等于分了两个层

  • Unity UGUI背包系统 之 创建背包对应数据类
  • 如何使用upupw集成工具添加虚拟主机?
  • RedHat 6.4 安装 Oppenoffice
  • 织梦DedeCms获取当前页面URL地址的调用方法
  • 热门搜索
    震悚的意思 骨感什么意思 鳞次栉比的意思 梗概的意思是什么 转社保需要什么手续 节操是什么意思 婆娑起舞的意思 什么时候买车优惠最大 凝重的意思 孜孜不倦是什么意思