方法一：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控制元素背景透明度总结的更多相关文章

  1. css设置元素背景透明度的2种方式

    更新记录 本文迁移自Panda666原博客,原发布时间:2021年7月9日. 设置元素的背景的透明度可以使用2种方式:方式1:opacity属性.方式2:使用rgba值.两种方式有一点差异,opaci ...

  2. CSS 控制元素 上下左右居中

    不说废话,直接 搞起..... 首先,我们将题目 <css控制元素上下左右居中> 分析一下哈,我是将其分成了4部分信息: 1.CSS控制: 只用 CSS 来达成目的 2.元素:  不只是d ...

  3. CSS只改变背景透明度，不改变子元素透明度

    一般情况下,我们可以使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即使对子元素重新定义也没有用,例如: <div style="opacit ...

  4. css控制元素 水平垂直居中

    控制元素居中核心代码为 position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; css: /* 容器 */ .w ...

  5. css 设置元素背景为透明

    要设置某一元素的背景为透明,在 chrome .firefox.opera 下是这样的: rgba 中的最后一个参数 0.4 就是想要的透明度,范围在0-1之间. 在 ie 中一般是这样的: filt ...

  6. css控制元素高度自适应

    可以采用元素定位 + padding 的方式使特定元素高度自适应. css 样式: html,body{ height:100%; margin:; padding:; } .wrap { heigh ...

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

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. CSS 设置背景透明度，不影响子元素

    由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素． 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...

  9. CSS控制超链接

    一.伪类 CSS控制元素的某种状态---偽类(用于向某些选择器添加特殊的效果)    偽类的语法:元素标签 偽类名称{属性:属性值;} 二.超链接        a:link:未访问的链接       ...

随机推荐

  1. 学到了林海峰,武沛齐讲的Day35 完 协程

    day3    requests.get  爬网页 greenlet  协程模块  还有asy!!!模快(后续版本) day4    事件驱动 day5    基础学习 day6    基础学习 da ...

  2. nowcoder73E 白兔的刁难 单位根反演+NTT

    感觉很套路? #include <bits/stdc++.h> #define ll long long #define setIO(s) freopen(s".in" ...

  3. RookeyFrame 模块 线上创建的模块 迁移到 线下来

    1. 把线上创建的model,写在项目的model层里面. 把文件 Rookey.Frame.Web\Config\TempModel\Order_File.code 复制到model层, 用文本编辑 ...

  4. “猜你喜欢”的背后揭秘--10分钟教你用Python打造推荐系统

    欲直接下载代码文件,关注我们的公众号哦!查看历史消息即可! 话说,最近的瓜实在有点多,从我科校友李雨桐怒锤某男.陈羽凡吸毒被捕.蒋劲夫家暴的三连瓜,到不知知网翟博士,再到邓紫棋解约蜂鸟.王思聪花千芳隔 ...

  5. 割点 —— Tarjan 算法

    由于对于这一块掌握的十分不好,所以在昨天做题的过程中一直困扰着我,好不容易搞懂了,写个小总结吧 qwq~ 割点 概念 在无向连通图中,如果将其中一个点以及所有连接该点的边去掉,图就不再连通,那么这个点 ...

  6. 最大字段和&洛谷11月月赛DIV2 T1

    蒟蒻只能打一打DIV2的基础题 太卑微了 这道题的本质其实是再建一个数组,如果s串i位置是0那么就给a[i]赋值为1,表示要累加个数,如果是1那么就把a[i]赋值为-1,表示个数减一,最后求最大子段和 ...

  7. Qt *.pro工程文件 详解

    先介绍一下QT中关于项目的相关介绍 app - 建立一个应用程序的makefile.这是默认值,所以如果模板没有被指定,这个将被使用. lib - 建立一个库的makefile. vcapp - 建立 ...

  8. JWT Claims

    JWT Claims “iss” (issuer)  发行人 “sub” (subject)  主题 “aud” (audience) 接收方 用户 “exp” (expiration time) 到 ...

  9. BeanDefinitionParserDelegate与资源解析

    继续上一次的分析 XmlBeanDefinitionReader.java 中 1.registerBeanDefinitions方法 documentReader.registerBeanDefin ...

  10. 数据库中的同义词synonym

    一.Oracle数据只有一个实例(简单理解就是Oracle 只能建立一个数据库,不像MySQL,它下面可以创建N个库),那么Oracle是根据用户灵活去管理的:这点读起来.理解     起来也不那么难 ...