之前项目中遇到纯色的半透明背景，都是这么干：

<style>

.box {width:300px;height:300px;position:relative;}

 .mask {width:300px;height:300px;position:absolute;z-index:;background-color:#;opacity:0.4;filter:alpha(opacity:);}

.content {width:300px;height:300px;position:absolute;z-index:;}

</style>

<div class="box">

    <div class="content">这里是内容</div>

    <div class="mask"></div>

</div>

但是，最近项目中，遇到高度不是固定的，这种方法就不行了。我也想过用Png24图片实现半透明效果，但是要用到图片，而且还有狗日的ie6兼容问题，虽然也可以解决，但是麻烦。

那有木有更好的方法呢？？答案是肯定的，不然我写这篇文章干嘛。

<style>

.box {width:300px;height:300px;background:rgba(,,,0.4);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=,StartColorStr='#66000000',EndColorStr='#66000000');}

</style>

<div class="box">

    就不告诉你这里是内容。

<div>

我们得到的效果是这样的，IE9 的透明度竟然有 60%!! 这显然不是我们想法的。原因是：IE9 也支持 filter，使得 filter 的结果和 background-color 叠加，所以是 60%。

解决方法必须有的：

.box{filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#66000000', endColorstr='#66000000');background:rgba(,,,0.4);}

:root .box{filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#00000000', endColorstr='#00000000');}/*for IE9*/

或者ie9的hack使用：

:root .box{filter:none;}/*for IE9*/

简单解释一下：

background:rgba(0,0,0,0.4);  
css3的RGBA，依次是red，green，blue,alpha，最后一个alpha透明度。

filter 渐变滤镜详细用法，[参见这里]
StartColorStr 和 EndColorStr:
#4c000000 是 30% 透明度的 #000000 的意思
组成: # + 透明度 + 颜色
算法: Math.floor(0.6 * 255).toString(16);

filter 渐变滤镜的用法看不懂？？？没关系，我也不太懂，网上有工具，转换一下就可以了：

[请使劲点击这里]



背景透明，内容不透明CSS代码生成器




<!DOCTYPE HTML>

<html>

<head>

    <meta charset="UTF-8">

    <title>背景透明，内容不透明CSS代码生成器</title>

    <script>

    if(window.top!=window){

        window.top.location.href = window.location.href;

    }

    </script>

</head>

<body>

<style type="text/css">

#hananBackgroundColorOpacity{margin:10px;}

#hananBackgroundColorOpacity span{margin-left:10px; color:#8a8c8e;}

#hananBackgroundColorOpacity textarea{width:650px; height:120px; padding:5px; color:#fff; background:#;}

#hananBackgroundColorOpacity strong{color:#;}

#hananBackgroundColorOpacity h3{color:#; border-bottom:1px solid #ccc; line-height:57px;}

#hananBackgroundColorOpacity h3 img{ float:right;}

#hananBackgroundColorOpacity h3 .c{ clear:both; height:0px;margin:;padding:;}

#hananBackgroundColorOpacity .hanan_introduction,#hananBackgroundColorOpacity .hanan_introduction a{  font-size:12px; color:#6E6E6E; }

#hananBackgroundColorOpacity img{border:none;}

</style>

<div id="hananBackgroundColorOpacity">

    <p class="hanan_introduction ">

        说明：为页面元素添加背景透明，内容不透明的效果，兼容IE6////、Chrome、Firefox、Safari、Opera。

    </p>

    <p>选择器：<input id="hananDomChooser" type="text" value="" /><span>id或者class等CSS选择器,比如:<strong>#abc</strong></span></p>

    <p>颜色值：<input id="hananColorValue" type="text" value="" /><span>16进制颜色值,不带#号,比如:<strong>#c77eb5</strong>,请填:<strong>c77eb5</strong></span></p>

    <p>透明度：<input id="hananOpacity" type="text" value="" /><span><strong></strong>到<strong></strong>之间,比如:<strong>0.5</strong></span></p>

    <p><input id="hananGetCssCodeButon" type="button" value="生成CSS代码" /></p>

    <p>

        CSS代码：<br/>

        <textarea id="hananCssCode" type="text"/></textarea>

    </p>

    <p class="hanan_introduction ">

        实现原理参考：<a href="http://www.cssha.com/through-the-ie-private-filter-let-ie6-ie7-ie8-support-transparent-background" target="_blank">http://www.cssha.com/through-the-ie-private-filter-let-ie6-ie7-ie8-support-transparent-background</a>

    </p>

</div>

<script type="text/javascript">

// <![CDATA[

function hananColorToRGB(col,opa){

    var c = col

    var R = parseInt(c.substring(,),), G = parseInt(c.substring(,),), B = parseInt(c.substring(),);

    return 'rgba(' + R + ',' + G + ',' + B + ','+ opa +')' ;

}

function smallToBig(col){

    var str = '';

    if(col.length==){

        str = col;

    }else{

        var _r = col.substring(,), _g = col.substring(,), _b = col.substring();

        _r += _r;

        _g += _g;

        _b += _b;

        str = _r + _g + _b;

    }

    return str;

}

function hananGetCssCode(){

    var chooser = document.getElementById('hananDomChooser').value;

    var col = smallToBig(document.getElementById('hananColorValue').value);

    var opa = document.getElementById('hananOpacity').value;

    var rgb = hananColorToRGB(col,opa);

    var iecol = parseInt((opa*)).toString() + col;

    if(chooser=='' || col=='' || opa==''){

        alert('选择器、颜色值、透明度都要填完哦亲！');

    }else{

        document.getElementById('hananCssCode').value = chooser +'{background:' + rgb + ';filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#' + iecol + ',endColorstr=#' + iecol + ');zoom:1;}'+

    '\r\n:root ' + chooser +'{filter:none\\9;}/*for IE9*/';

    }

}

window.onload = function (){

    document.getElementById('hananGetCssCodeButon').onclick = function(){

        hananGetCssCode();

    }

}

// ]]>

</script>

</body>

</html>


												


											
css背景色半透明的最佳实践的更多相关文章
	

    
								
  1. 背景半透明rgba最佳实践
		
    by 一丝 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
    
		
    2. 
						
  2. CSS非ASCII字符最佳实践
		
    问题场景 在写样式时经常需要用到非ASCII字符的属性值,如下: ? 1 2 3 4 5 6 7 8 9 10 11 .hot_list .sign_discount:before {    cont ...
    
		
    3. 
						
  3. 完美CSS文档的8个最佳实践
		
      在css的世界,文档没有被得到充分的利用.由于文档对终端用户不可见,因此它的价值常常被忽视.另外,如果你第一次为css编写文档,可能很难确定哪些内容值得记录,以及如何能够高效完成编写. 然而,为C ...
    
		
    4. 
						
  4. 【27前端】背景半透明rgba LESS实践
		
    今天有看到司徒正美<背景半透明rgba最佳实践>的文章和里面推荐的一个在线工具CSS背景颜色属性值转换  . 于是联系到自己的less库,新技能Get. 内容如下: /*在你的less库中 ...
    
		
    5. 
						
  5. <读书笔记>《Web前端开发最佳实践》
		
    P77 P89 CSS Reset P94 给CSS样式定义排序    排序工具:CSScomb P97 什么是CSS的权重?权重是指选择符的优先级 P100 工具:Sass Less P101 框架 ...
    
		
    6. 
						
  6. 前端代码标准最佳实践：CSS
		
    前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能.那么接着上一篇,我们再来 ...
    
		
    7. 
						
  7. SMACSS:一个关于CSS的最佳实践-3.Layout Rules
		
    本篇笔者要介绍的是Layout Rules.看完本篇,大家将会知道Layout Rules的作用,以及哪些CSS应该归类为Layout Rules. 什么是Layout Rules? Layout R ...
    
		
    8. 
						
  8. SMACSS:一个关于CSS的最佳实践-2.Base Rules
		
    回顾 在上一篇SMACSS:一个关于CSS的最佳实践-Overview中,讲到SMACSS将CSS Rules分为5个Categories: Base Layout Module State Them ...
    
		
    9. 
						
  9. SMACSS:一个关于CSS的最佳实践-1.Overview
		
    什么是SMACSS? SMACSS(发音"smacks"),全称Scalable and Modular Architecture for CSS.顾名思义,SMACSS是一个可扩 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. redis清除缓存和连接远程服务器
			
    直接进入命令行输入 1.连接远程redis:   redis-cli -h 127.0.0.1 -p 3008 -a pIctur3   (a后是密码) 2.查看缓存:keys * 3.清除缓存:de ...
    
			
    2. 
						
  2. scrollview滑动到某区域执行某种方法
			
    在这里通过  offset.y   检测滑动到的区域 通过if 语句执行需要的方法   -(void)scrollViewDidScroll:(UIScrollView *)scrollView {  ...
    
			
    3. 
						
  3. Cocos Creator 的实现拖尾效果
			
    在游戏中,有时会需要在某个游戏对象上加上移动后的轨迹若隐若现的效果.使得游戏的效果较好,比如游戏大招,刀光,法术,流星划痕之类. Cocos Creator提供了一种内置的拖尾渐隐效果的实现方法:组件 ...
    
			
    4. 
						
  4. 标  题: [心得]传统IT转互联网面试经验分享
			
    发信人: lgonnet (逃之夭夭), 信区: Java标  题: [心得]传统IT转互联网面试经验分享发信站: 水木社区 (Wed Jul  1 10:18:38 2015), 站内 统一回复一下 ...
    
			
    5. 
						
  5. 使用Maven自动部署Java Web项目到Tomcat问题小记
			
    导读 首先说说自己为啥要用maven管理项目,一个直接的原因是:我在自己电脑上开发web项目,每次部署到服务器上时都要经历如下步骤: 首先在Eclipse里将项目打包成war包 将服务器上原来的项目文 ...
    
			
    6. 
						
  6. Delphi的接口委托示例
			
    {  说明:该事例实现的效果,在单个应用或代码量小的项目中,可以完全不用接口委托来完成.  之所以采用委托接口,主要是应用到:已经实现的接口模块中,在不改变原有代码的情况下,  需要对其进行扩展:原始 ...
    
			
    7. 
						
  7. iOS开发-UIImageView高效设置Radius
			
    圆角的设置在iOS中随处可见,开发的时候也很方便,但是有的时候如果一个页面有大量的需要设置圆角的图片,容易产生性能问题,UIImageView ios9.0之前设置圆角是会产生离屏渲染的,9.0之后不 ...
    
			
    8. 
						
  8. 使用sshfs挂载远程服务器目录
			
    点击访问原文 您还可以加入全栈技术交流群(QQ群号:254842154) 服务器日志查看,是开发人员和服务器运维人员在工作中经常会遇到的一件事情,只有一台服务器时,比较好办,直接登录服务器使用tail ...
    
			
    9. 
						
  9. OpenCV3 for python3 学习笔记2
			
    1.安装 如果你是第一次使用OpenCV Python开发包,想要安装OpenCV Python只要执行如下命令行即可:  pip install opencv-python   如果你还想使用Ope ...
    
			
    10. 
						
  10. [Canvas]炸弹人初成版
			
    试玩请点此下载代码,并使用浏览器打开index.html. 用方向键操作小人,空格键放炸弹,把敌人消灭算赢,被炸弹炸中或是碰到敌人算输. 图例: 源码: <!DOCTYPE html> & ...
    
			
    11.