先看看众所周知的解决方案

如果我们想要一个半透明背景,有两种实现方式:

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实现背景透明的更多相关文章

  1. opacity的背景透明&background中rgba的背景色透明

    近期使用css实现了一个loading旋转加载的图片效果,类似gif动画 过程中,需要透明背景,但是图片不要透明 只要背景透明!只要背景透明!只要背景透明! 这里对透明模糊了,两种写法,模糊了 A: ...

  2. css的三个特性 背景透明设置

    关于行内元素(补充一点) 行内元素只能容纳文本或其他行内元素.(a特殊a里面可以放块级元素) 例子: 关于行高tip: 选择器的嵌套层级不应大于3级,位置靠后的限定条件应尽可能的精确. 属性定义必须另 ...

  3. 【原】CSS实现背景透明,文字不透明,兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  4. CSS实现背景透明,文字不透明,兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  5. CSS实现背景透明,文字不透明(兼容所有浏览器)

    我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例: 打开ps,在图层面板上,可以看到设置图层整理不透明度的菜单,从 0% (完全透明)到 100%(完全不透明). 实现透明的css方 ...

  6. CSS实现背景透明,文字不透明(兼容各浏览器)

    在 FF/Chrome 等较新的浏览器中可以使用css属性background- color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜f ...

  7. css 背景透明文字(内容)不透明三种实现方法

    好久没写博客了.以前还想着最少一个月抽空写几篇.结果没做到O(∩_∩)O~~.好吧.现在努力,继续坚持. 看着以前写的东西,感觉自己在逐渐成长. 先上图: 本文主要记录如上图一样的.文字或内容不透明, ...

  8. CSS实现背景透明,文字不透明(各浏览器兼容)

    /*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; ...

  9. CSS让div背景透明

    div背景透明样式: 样式代码: .alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity ...

随机推荐

  1. ThinkPHP模型基础类提供的连贯操作方法

    ThinkPHP模型基础类提供的连贯操作方法(也有些框架称之为链式操作),可以有效的提高数据存取的代码清晰度和开发效率,并且支持所有的CURD操作. 直线电机哪家好 使用也比较简单, 假如我们现在要查 ...

  2. 洛谷P5338 [TJOI2019]甲苯先生的滚榜

    原题链接洛谷P5338 [TJOI2019]甲苯先生的滚榜 题目描述 甲苯先生在制作一个online judge,他发现做比赛的人们很关心自己的排名(显而易见),在acm赛制的比赛中,如果通过题目数量 ...

  3. resful风格

    package com.atguigu.springboot.controller; import com.atguigu.springboot.dao.DepartmentDao; import c ...

  4. WCF服务编程-基础

    WCF是微软建立新一代的分布式应用及面向服务应用的标准平台,是基于原有.NET Framework 2.0的扩展.虽然在WCF发布不久就已经在项目中使用WCF技术了.但是由于在项目中还没有较大规模的应 ...

  5. 小米手机的miui10 连接电脑。本地播放器推荐。

    问题: 电脑连接了手机却不能看到手机里面的文件. 方法一 方法二 连接和电脑一样的wifi 进入文件管理 来自:百度经验. 本地播放器推荐 爱奇艺万能播放器(还不错,目前在用).qq影音 爱奇艺万能播 ...

  6. Class绑定v-bind:class

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  7. Data too long for column

    一篇文章的正文,需要很多字数,默认就是255,不够 @Lob @Basic @Type(type = "text") @Column(name = "detail&quo ...

  8. JVM系列(四)— 原子性、可见性与有序性

    上一篇讲了Java内存模型的相关知识,模型设计正是围绕着并发过程中如何处理原子性,可见性和有序性这3个特征来建立的 一.原子性(Atomicity) 原子性的概念无需多说,熟悉事物的4个特性的应该比较 ...

  9. Leetcode60. Permutation Sequence第k个排列

    给出集合 [1,2,3,-,n],其所有元素共有 n! 种排列. 按大小顺序列出所有排列情况,并一一标记,当 n = 3 时, 所有排列如下: "123" "132&qu ...

  10. IDEA取消形参名显示

    idea默认情况下如显示形参名,看起来有点不习惯 现在设置去掉 (1)点击工具栏上的快捷按钮(快捷键:alt + ctrl + s) 或者"File" -> "Se ...