CSS背景半透明效果

说到CSS的透明效果可以使用如下方式：

1. opacity属性设置：例如opacity:0.7，而低版本的IE浏览器不直接支持这个属性，但是可以使用滤镜filter:alpha(opacity:70)来达到效果。

例如：.box{width:100px;height:100px;background:#000;opacity:.7;*filter{opacity:70}}

如果使用此方式，有个副作用，半透明效果子类标签里面的文字也会受到影响，一样有透明效果，因为有继承关系。

2.使用 background:rgba(0,0,0,.7)，低版本ie则使用滤镜filter的渐变效果，2者都不会继承.

.box{

width:100px;

height:100px;

background:rgba(0,0,0,.7);

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#CC000000, endcolorstr=#CC000000);

}

但是IE9对这2个属性都支持，所以效果会重叠。可使用一个HACK方式解决。

:root.box{

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00000000, endcolorstr=#00000000);

}

使用一些其他HACK好像效果无用(例如\9 ，无奈中，有知道的朋友可以留言噢。)

这样文字就不会有透明效果了。如果这个层加了绝对定位，低版本的IE又坑爹了，居然会穿透层。

那么就得加上这么一句background: url(about:blank) transparent\9; 记得加在background:rgba()上面。因为IE10也会识别\9这个hack。如果放在下方IE10背景就没了。

所以最后的代码：

.box{

width:100px;

height:100px;

background: url(about:blank) transparent\9;

background:rgba(0,0,0,.7);

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#CC000000, endcolorstr=#CC000000);

}

:root .box{

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00000000, endcolorstr=#00000000);

}

如果有更好的实现方式，欢迎大家留言，多交流。

CSS背景半透明效果相关推荐

css透明效果代码结构,用CSS实现背景半透明效果的方法实现_css
如何用css实现背景半透明效果?做过活动页面的同学可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一个用于做透明背景,因为透明滤镜的效果会影响到里面的内容.不过如果你只需求 ...
问题：给DIV设置半透明层，用CSS实现半透明效果呢？
遇到的问题: 我们在写css样式时,div半透明效果如何实现呢?使用css实现div成半透明效果,css实现层与背景半透明效果. 解决方法: 我们还是直接上代码吧. 一.CSS半透明基础介绍设置DI ...
Eeic Meyer on CSS 之背景半透明效果
CSS 并不支持任何形式上的半透明的效果. 书上介绍了两种方法来达到半透明的效果. 第一种是利用"半屏(halfscreen)",是由Todd Fahrner 提出的. 原理上就是 ...
css 背景条纹效果
background-image: linear-gradient(45deg,red 25%,green 0,green 50%,red 0,red 75%,green 0); background ...
html如何设置背景半透明,css中如何设置背景半透明
css中设置背景半透明效果可以使用opacity属性,该属性用来设置元素的不透明级别,如[opacity:0.5],表示将元素设置为半透明状态. 本文操作环境:windows10系统.css 3.th ...
html内容被背景图片遮住怎么办_完美实现文字置于图片之上且背景半透明
之前发过一篇关于将图片的说明文字显示在图片之上且背景半透明效果的文章,讲述了如何将文字置于图片之上且背景半透明,但那个解决办法会出现一个问题,就是背景虽然半透明了,但文字也会半透明,今天发现百度旅 ...
css设置背景半透明，文字不透明效果
设置背景半透明,文字不透明效果一.常见的错误做法最常见的做法就是: 1.设置元素的opacity,这种设置出来的效果就是内容与背景都是半透明的,严重影响视觉效果. 2.设置background-c ...
CSS实现Div层背景半透明而内容不透明的效果
CSS实现Div层背景半透明而内容不透明的效果 2014年5月18日 MK 前端设计 0 阅读 2932次前几天有一个学弟问我,怎么样能实现Div层背景半透明而内容不透明的效果呢,他写的效果不管怎么 ...
html仿苹果桌面导航js css,CSS简单实现弹出框、输入框等的背景幕布，模仿苹果官网导航块的半透明效果。...
需求提要我们如果想写一个效果类似弹出框的组件,首先简单分析一下弹出框的几个特性:弹出框肯定位于当前页面的最顶端,并且在弹出框关闭之前,其他控件都无法点击.focus等. 为了更好突出弹出框的效果,除 ...

CSS背景半透明效果

CSS背景半透明效果相关推荐

最新文章

热门文章