展会信息港展会大全

兼容IE6浏览器CSS背景半透明实例
来源:互联网   发布日期:2016-03-25 16:06:56   浏览:2670次  

导读:本文章主要是利用到css中的filter来实现背景半透明了,下面小编来给各位整理几个实例,希望对各位同学会有所帮助。这里用到了IE的filter的滤镜效果,background:rgba是C...

本文章主要是利用到css中的filter来实现背景半透明了,下面小编来给各位整理几个实例,希望对各位同学会有所帮助。

这里用到了IE的filter的滤镜效果,background:rgba是CSS3属性,大家都知道。

最后一句是针对IE9的。用了结构性伪类 E:root : {attribute} , 伪类:root 仅支持CSS3的浏览器 ,所以这段CSS是兼容所有浏览器的。

核心代码

代码如下

复制代码

#header{

filter:progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#E518515F', endColorstr='#E518515F');

background:rgba(24, 81, 95, 0.9);

}

:root #header { filter:none; }/*把IE9的filter去掉,因为IE9也支持background:rgba(),所以去掉filter,不然会导致重复*/

实例

代码如下

复制代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>

IE背景半透明

</title>

<style type="text/css">

.alpha{

width: 100px;

height: 100px;

color: #fff;

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

filter: progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #50000000, endColorstr = #50000000)9;

}

:root .alpha{

filter: none;/*for IE9*/

}

</style>

</head>

<body>

<div class="alpha">

文字文字

</div>

</body>

</html>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港