浏览器css透明属性opacity

大家知道css opacity属性背景透明是常有的事，发现有时候居然存在浏览器不兼容问题，后经过查找尝试发现如下能使浏览器兼容不再有问题。有兼容问题的不妨一试。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>半透明演示Demo</title>
<style>
.div-a{ background:url(286743.jpg) no-repeat;width:100%;height:768px;padding:10px}
.div-b{ background:#F3E109;width:50%;height:50%;padding:5px;color:green; filter:alpha(Opacity=10);-moz-opacity:0.1;opacity: 0.1}
/*这里加上-moz-opacity 可使浏览器新老版本兼容 大家会发现去掉-moz-opacity  一些浏览器效果不变的 但是某些版本浏览器可就不一定了*/
</style>
</head> <body>
<div class="div-a">
<div class="div-b">半透明演示Demo</div>
</div>
</body>
</html>

opacity 半透明属性：filter:alpha(Opacity=10);-moz-opacity:0.1;opacity: 0.1

转载于:https://blog.51cto.com/11025090/1915664

浏览器css透明属性opacity相关推荐

CSS3透明属性opacity
例子: <div id="fixhovertree" style="position:fixed;left:100px;width:120px;top:100px; ...
CSS3中的透明属性opacity的用法实例
实例设置 div 元素的不透明级别: div { opacity:0.5; } 完整例子: <!DOCTYPE html> <html> <head> <s ...
html页面透明度属性,css透明度属性是什么？
css透明度属性是什么?CSS透明度属性是opacity属性.下面本篇文章就来给大家介绍一下CSS 透明度属性--opacity属性.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
html css 鼠标手,CSS cursor 和 opacity 属性
cursor :一些不同的光标,当设置该属性之后,鼠标指上去会随着属性而改变. 举例: 十字线默认的帮助指示某对象可被移动出现左右箭头一只手正在加载文本 opacity:用于设置元素的透 ...
[css] rgba()和opacity这两个的透明效果有什么区别呢？
[css] rgba()和opacity这两个的透明效果有什么区别呢? 1.opacity 是属性,rgba()是函数,计算之后是个属性值: 2.opacity 作用于元素和元素的内容,内容会继承元素 ...
CSS cursor 和 opacity 属性
cursor :一些不同的光标,当设置该属性之后,鼠标指上去会随着属性而改变. 举例: <span style="cursor:crosshair">十字线</s ...
[css] 写出主流浏览器内核私有属性的css前缀
[css] 写出主流浏览器内核私有属性的css前缀完善一下: Chrome:Blink内核 -webkit-Safari:WebKit内核 -webkit-Firefox :Gecko内核 -moz ...
[css] 当使用opacity时会使得元素的子元素也透明，此时不想要子元素也跟着透明怎么办？
[css] 当使用opacity时会使得元素的子元素也透明,此时不想要子元素也跟着透明怎么办? 当父元素使用opacity时,子元素也会继承该透明度,即使重新设置透明度也不行.楼上的两种方法要么是放弃 ...
CSS浏览器兼容性的4个解决方案：浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和自动化插件...
前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了(如果全写出来,那真是一箩筐),更让人头疼的是,还要面临各种适配.兼容性问题. 一直以来都是头痛医头脚痛医脚,没有进行系统的梳理,整个 ...

浏览器css透明属性opacity

浏览器css透明属性opacity相关推荐

最新文章

热门文章