CSS利用filter/opacity实现背景透明
先看看众所周知的解决方案
如果我们想要一个半透明背景,有两种实现方式:
1、利用CSS和opacity属性
.opacity {
filter:alpha(opacity=);/*IE浏览器*/
opacity: 0.5;/*非IE浏览器*/
}
2、建立一个24位PNG背景图片
第一种利用opacity的问题除了 需要通过麻烦的语法来兼容所有浏览器, 还有不单该元素自身背景透明了,它的子元素会继承opacity属性,也会透明.
所以里面所有的文字也是透明的,这一般不是想要的效果. 你可以做一些CSS trick,通过建立额外的元素来解决这个问题,但这种解决方案很恶心.
第二种,用PNG的问题是会额外增加HTTP请求, 而且图片比几行css代码要大得多- 尤其考虑到图片不能太小以避免 IE下24位PNG图透明时引起的内存泄漏和IE6下灰色背景的问题也是很常见的.
那么有没有更好的方案来实现呢,答案是必须的,就是用RGBa colors 就可以实现轻松的背景透明
.opacity{
/* RGBa, 透明度0.6 */
background: rgba(, , , 0.6);
}
透明将只对背景生效,很好很强大,但是IE是不支持RGBa的
幸运的是IE浏览器有一个渐变过滤器(the gradient filter), 我们只需要把开始结束都设置成一个颜色就可以了. 你现在会想,”那我们怎么将其透明呢?”. 你只需要用16进制值来定义颜色就可以了. 下面是用渐变过滤器实现和上面同等透明效果的代码:
.opacity {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#, endColorstr=#);
}
你可以看到定义里的8位16进制数字, 前两位代表透明度,接下来两位是红色,接着就是绿色和蓝色. 注意两位16进制颜色的范围是0~255(ff). 那我们怎么将0.6转化为16进制数呢?
最快最好的方法就是Javascript来获取
<script type="text/javascript">
alert(Math.floor(0.3 * ).toString());//输出"4c"
alert(Math.floor(0.6 * ).toString());//输出"99"
</script>
最后的整合代码:
/* 黑色色背景,透明度0.3 */
.opacity30 {
background: transparent\;
zoom: ;
background:rgba(,,,.);
*filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000,endColorStr=#4c000000);*background:url(about:blank);
}
/* 黑色色背景,透明度0.6 */
.opacity30{
background: transparent\;
background:rgba(,,,.);
zoom: ;
background:rgba(,,,.);*filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#,endColorStr=#);
}
如果你添加后链接区域变小,可尝试添加*background:url(about:blank);来解决
CSS利用filter/opacity实现背景透明的更多相关文章
- opacity的背景透明&background中rgba的背景色透明
近期使用css实现了一个loading旋转加载的图片效果,类似gif动画 过程中,需要透明背景,但是图片不要透明 只要背景透明!只要背景透明!只要背景透明! 这里对透明模糊了,两种写法,模糊了 A: ...
- css的三个特性 背景透明设置
关于行内元素(补充一点) 行内元素只能容纳文本或其他行内元素.(a特殊a里面可以放块级元素) 例子: 关于行高tip: 选择器的嵌套层级不应大于3级,位置靠后的限定条件应尽可能的精确. 属性定义必须另 ...
- 【原】CSS实现背景透明,文字不透明,兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- CSS实现背景透明,文字不透明,兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- CSS实现背景透明,文字不透明(兼容所有浏览器)
我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例: 打开ps,在图层面板上,可以看到设置图层整理不透明度的菜单,从 0% (完全透明)到 100%(完全不透明). 实现透明的css方 ...
- CSS实现背景透明,文字不透明(兼容各浏览器)
在 FF/Chrome 等较新的浏览器中可以使用css属性background- color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜f ...
- css 背景透明文字(内容)不透明三种实现方法
好久没写博客了.以前还想着最少一个月抽空写几篇.结果没做到O(∩_∩)O~~.好吧.现在努力,继续坚持. 看着以前写的东西,感觉自己在逐渐成长. 先上图: 本文主要记录如上图一样的.文字或内容不透明, ...
- CSS实现背景透明,文字不透明(各浏览器兼容)
/*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; ...
- CSS让div背景透明
div背景透明样式: 样式代码: .alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity ...
随机推荐
- ThinkPHP模型基础类提供的连贯操作方法
ThinkPHP模型基础类提供的连贯操作方法(也有些框架称之为链式操作),可以有效的提高数据存取的代码清晰度和开发效率,并且支持所有的CURD操作. 直线电机哪家好 使用也比较简单, 假如我们现在要查 ...
- 洛谷P5338 [TJOI2019]甲苯先生的滚榜
原题链接洛谷P5338 [TJOI2019]甲苯先生的滚榜 题目描述 甲苯先生在制作一个online judge,他发现做比赛的人们很关心自己的排名(显而易见),在acm赛制的比赛中,如果通过题目数量 ...
- resful风格
package com.atguigu.springboot.controller; import com.atguigu.springboot.dao.DepartmentDao; import c ...
- WCF服务编程-基础
WCF是微软建立新一代的分布式应用及面向服务应用的标准平台,是基于原有.NET Framework 2.0的扩展.虽然在WCF发布不久就已经在项目中使用WCF技术了.但是由于在项目中还没有较大规模的应 ...
- 小米手机的miui10 连接电脑。本地播放器推荐。
问题: 电脑连接了手机却不能看到手机里面的文件. 方法一 方法二 连接和电脑一样的wifi 进入文件管理 来自:百度经验. 本地播放器推荐 爱奇艺万能播放器(还不错,目前在用).qq影音 爱奇艺万能播 ...
- Class绑定v-bind:class
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- Data too long for column
一篇文章的正文,需要很多字数,默认就是255,不够 @Lob @Basic @Type(type = "text") @Column(name = "detail&quo ...
- JVM系列(四)— 原子性、可见性与有序性
上一篇讲了Java内存模型的相关知识,模型设计正是围绕着并发过程中如何处理原子性,可见性和有序性这3个特征来建立的 一.原子性(Atomicity) 原子性的概念无需多说,熟悉事物的4个特性的应该比较 ...
- Leetcode60. Permutation Sequence第k个排列
给出集合 [1,2,3,-,n],其所有元素共有 n! 种排列. 按大小顺序列出所有排列情况,并一一标记,当 n = 3 时, 所有排列如下: "123" "132&qu ...
- IDEA取消形参名显示
idea默认情况下如显示形参名,看起来有点不习惯 现在设置去掉 (1)点击工具栏上的快捷按钮(快捷键:alt + ctrl + s) 或者"File" -> "Se ...