CSS控制元素背景透明度总结

方法一:CSS3的background rgba

filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#7F000000‘,endColorstr=‘#7F000000‘);background:rgba(0,0,0,0.5);

常用的方法是rgba来实现背景透明度 兼容ie6 ie7 ie8的做法是用ie的滤镜实现

有个小问题就是通过这种方法实现背景透明度的话在ie系列下如果元素需要绑定事件,鼠标移动到透明区域总是不能准确获取元素。

方法二:opacity

在实际案例中opacity我们通常用在改变元素的透明度,而不是背景透明度。

opacity:0.5;filter: alpha(opacity=50);*zoom:1;

IE4-IE7使用filter: alpha(opacity=50),但要同时使该元素拥有hasLayout;

这种方法实现的话里面包含的元素也会被改变透明度。

有幸看了一下163的代码发现有个方法可以让子元素100%透明度的办法,就是设置position: relative;

<!DOCTYPE>
<html>
<head>
    <title>opacity</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        body{background-color: red;}
        .box{opacity:0.5;filter: alpha(opacity=50);*zoom:1;background-color: #000;width: 500px;height: 500px;text-align: center;line-height: 500px;font-size: 2em; color: #fff;}
        .box p{position: relative;}
    </style>
</head>
<body>
<div class="box">
    <p>文字123文字123文字</p>
</div>
</body>
</html>

最终解决方法

如果产品需求只是简单的改变背景透明度,方法一就足够了。

但是如果还需要给有背景透明的的元素再绑定事件的话就要做一下调整了。

支持CSS3的浏览器用rgba,ie就用filter: alpha(opacity=50),子元素设置position: relative;

.box{background-color:#000;filter:alpha(opacity=50);background:rgba(0,0,0,0.5);}
.box p{position:relative;}

CSS控制元素背景透明度总结

时间: 2024-10-13 21:29:32

CSS控制元素背景透明度总结的相关文章

CSS只改变背景透明度,不改变子元素透明度

一般情况下,我们可以使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即使对子元素重新定义也没有用,例如: Html代码   <div style="opacity:0.4; background-image:url(...);"> <div style="opacity:1.0;"> 显示文字 </div> </div> 文字元素的透明度也会是0.4. 于是想一想,如果有方法只

CSS定位元素--背景

CSS 里也一样,每个元素盒子都可以想象成由两个图层组成.元素的前景层包含内容(如文本或图片)和边框,元素的背景层可以用实色填充(使用background-color 属性),也可以包含任意多个背景图片(使用background-image 属性),背景图片叠加在背景颜色之上. CSS背景属性 background-color background-image background-repeat background-position background-size background-att

css 设置元素背景为透明

要设置某一元素的背景为透明,在 chrome .firefox.opera 下是这样的: [css] view plain copy background-color: rgba(0, 0, 0, 0.4); rgba 中的最后一个参数 0.4 就是想要的透明度,范围在0-1之间. 在 ie 中一般是这样的: [css] view plain copy background-color: rgb(0, 0, 0); filter: alpha(opacity=40); opacity 表示透明度

CSS设置元素背景为透明

IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: background-color: rgba(0, 0, 0, 0.2); 兼容各类浏览器设置css背景为透明办法,即两者合并设置css: (ie 不支持 rgba,所以rgba不会起作用) background-color: rgb(0, 0, 0); filter: alpha(opacity=

CSS 控制元素 上下左右居中

此文章为转载,目的是自己好参考 左右居中:  #method. -->. margin:0 auto;   效果图: 上下居中:  在介绍方法之前,我先声明一下, 这里的 上下居中法,都是已知 height的,总结分两种情况,1. 具体height 和 2.百分比height,但无论哪种形式的height,应该都可以归为 已知height. 下面说一说,百分比height 的两种需要注意的情景: 情景一:position:absoute; top:0; left:0; width:xx%;hei

css控制元素垂直居中的几种方法

一.单行文本垂直居中 HTML: <div id="parent"> <div id="child">Content here</div> </div> CSS: #child { line-height: 200px; } 二.垂直居中一张图片 HTML <div id="parent"> <img src="image.png" alt="&quo

css设置元素背景(待续)

背景background 简写形式为 backgroud:background-color background-position background-size background-repeat background-origin background-clip background-attachment background-image 其中 background-color背景颜色 background-position 设置图像的位置 可取两个值,字符串的话,第一个表示垂直方向,值包括

css父元素背景覆盖其子元素背景

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 8 .test1{ 9 width: 100px; 10 height: 100px; 11 border: 1px solid green; 12 background: green; 13 position: absol

设置元素背景透明度

.mb{16 background-color:#9e9e9e;filter:Alpha(Opacity=60);position:absolute;opacity:0.6;top:0;left:0;z-index:10; 18 }