背景透明IE和rgba
opacity:0.5;
filter:Alpha(opacity=40); //IE8以下
当我们设置opacity透明时,opacity后代元素会随着一起具有透明性,所以我们Opacity中的文字随着透明值下降越来越看不清楚,而RGBA不具有这样的问题,但是IE浏览器不支持rgba属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container{
width: 500px;
height:378px;
margin: 100px auto;
position: relative;
} .container i{
width: 500px;
height:378px;
position: absolute;
top: 0px;
color:#fff;
font-size: 50px;
background-color: #000; /* 字颜色会变 */
/* opacity: 0.4;
filter: Alpha(opacity=40); */ /* 字颜色不会变 */
background: transparent;
background-color: rgba(0, 0, 0,0.5);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000);
}
</style>
</head>
<body>
<div class="container">
<i>喵喵喵</i>
<img src="a6.jpg">
</div>
</body>
</html>
背景透明IE和rgba的更多相关文章
- opacity的背景透明&background中rgba的背景色透明
近期使用css实现了一个loading旋转加载的图片效果,类似gif动画 过程中,需要透明背景,但是图片不要透明 只要背景透明!只要背景透明!只要背景透明! 这里对透明模糊了,两种写法,模糊了 A: ...
- input设置背景透明、placeholder的字体颜色及大小
1.设置input背景透明: background:rgba(255,255,255,0.1); 前面三个参数为对应的rgb数值,第四个参数为透明度:0~1,0:透明,1:不透明: 2.设置input ...
- 通过IE私有滤镜让IE6 7 8支持背景透明,内容不透明效果。
CSS3已经支持背景rgba的rgba透明度,这一方法可以避免元素内容也随背景一起变透明(详情请阅http://www.cssha.com/css3-new-knowledge-student).但是 ...
- 【原】CSS实现背景透明,文字不透明,兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- CSS实现背景透明,文字不透明(兼容各浏览器)
在 FF/Chrome 等较新的浏览器中可以使用css属性background- color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜f ...
- CSS实现背景透明,文字不透明,兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- css 背景透明文字(内容)不透明三种实现方法
好久没写博客了.以前还想着最少一个月抽空写几篇.结果没做到O(∩_∩)O~~.好吧.现在努力,继续坚持. 看着以前写的东西,感觉自己在逐渐成长. 先上图: 本文主要记录如上图一样的.文字或内容不透明, ...
- CSS实现背景透明,文字不透明(各浏览器兼容)
/*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; ...
- 背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)
以背景黑色,透明度0.5举例为大家详细介绍下关于背景透明,文字不透明的最佳方法同时兼容IE,具体实现如下,感兴趣的朋友可以参考下哈希望对大家有所帮助 以背景黑色,透明度0.5举例 非IE:backgr ...
随机推荐
- 依赖注入容器Autofac与MVC集成
Autofac是应用于.Net平台的依赖注入(DI,Dependency Injection)容器,具有贴近.契合C#语言的特点.随着应用系统的日益庞大与复杂,使用Autofac容器来管理组件之间的关 ...
- Django:之CMDB资源系统
渐谈CMDB需要内容,ITIL.CMDB介绍.Django自定义用户认证.Restful规范.资产管理功能开发. ITIL介绍 TIL即IT基础架构库(Information Technology I ...
- 手机端的META你知道多少?
一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...
- KVM 基本硬件容量扩容
在工作当中如果虚拟机的容量不够使用 如何添加呢? CPU添加 cpu添加有两种方式: 1 创建虚拟机的时候可以添加 # virt-install --help | grep cpu --vcpus=V ...
- ios 贝塞尔画图
CGContextRef context = UIGraphicsGetCurrentContext(); //写文字 CGContextSetRGBFillColor(context, 1, 0, ...
- Flask architecture
论文The Flask Security Architecture: System Support for Diverse Security Policies 介绍了Flask architectur ...
- Ubuntu下修改DNS重启也能用的方法
1.通过修改:/etc/resolvconf/resolv.conf.d/base(这个文件默认是空的)实现 内容填上需要修改的nameserver
- /var/lib/mysql/mysql.sock错误的解决办法
问题描述: 使用mysql -uroot -p登录出现找不到 /var/lib/mysql/mysql.sock或者被使用的问题. 可以用如下命令登录:mysql -p --socket=/tmp/m ...
- About struct in C
something new: to set value in struct can be in case i cannot view picture.. i write the snippet her ...
- HTML5新特性总览
html5的革新带来了更多的功能,简单的一个标签遍可以做到很多事情,例如 (1)canvas画图,vedio视屏,geolocation等等新标签. 如何检查浏览器是否支持这些新特性? 这样就足够,改 ...