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

<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. CSS非ASCII字符最佳实践

    问题场景 在写样式时经常需要用到非ASCII字符的属性值,如下: ? 1 2 3 4 5 6 7 8 9 10 11 .hot_list .sign_discount:before {    cont ...

  3. 完美CSS文档的8个最佳实践

      在css的世界,文档没有被得到充分的利用.由于文档对终端用户不可见,因此它的价值常常被忽视.另外,如果你第一次为css编写文档,可能很难确定哪些内容值得记录,以及如何能够高效完成编写. 然而,为C ...

  4. 【27前端】背景半透明rgba LESS实践

    今天有看到司徒正美<背景半透明rgba最佳实践>的文章和里面推荐的一个在线工具CSS背景颜色属性值转换  . 于是联系到自己的less库,新技能Get. 内容如下: /*在你的less库中 ...

  5. <读书笔记>《Web前端开发最佳实践》

    P77 P89 CSS Reset P94 给CSS样式定义排序    排序工具:CSScomb P97 什么是CSS的权重?权重是指选择符的优先级 P100 工具:Sass Less P101 框架 ...

  6. 前端代码标准最佳实践:CSS

    前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能.那么接着上一篇,我们再来 ...

  7. SMACSS:一个关于CSS的最佳实践-3.Layout Rules

    本篇笔者要介绍的是Layout Rules.看完本篇,大家将会知道Layout Rules的作用,以及哪些CSS应该归类为Layout Rules. 什么是Layout Rules? Layout R ...

  8. SMACSS:一个关于CSS的最佳实践-2.Base Rules

    回顾 在上一篇SMACSS:一个关于CSS的最佳实践-Overview中,讲到SMACSS将CSS Rules分为5个Categories: Base Layout Module State Them ...

  9. SMACSS:一个关于CSS的最佳实践-1.Overview

    什么是SMACSS? SMACSS(发音"smacks"),全称Scalable and Modular Architecture for CSS.顾名思义,SMACSS是一个可扩 ...

随机推荐

  1. git恢复某个已修改的文件--备忘

    checkout 恢复某个已修改的文件(撤销未提交的修改): $ Git checkout file-name revert 还原已提交的修改(已经提交过的修改,可以反悔-) 还原最近一次提交的修改: ...

  2. 微信企业号开发之weixin://preInjectJSBridge/fail

    最近几天遇到个奇怪的问题,目前只有在Andriod平台上出现:weixin://preInjectJSBridge/fail 不止我一个人遇到这个问题,群里也有好几个问了这个问题.这个问题直接导致我们 ...

  3. 构造函数,super()

    一.构造函数的作用 创建类的对象,只有对象才能调用一个类中的方法和属性 二.在有继承关系的类中,创建子类对象,初始化的顺序 先父类构造 —>后子类构造 为什么父类构造会被调用?因为有继承关系,子 ...

  4. CoordTools

    APPLICATION_VERSION="JTNDYXBwbGljYXRpb24lMjBuYW1lJTIwJTNEJTIwJTIyQ29vcmRUb29sc1BybyUyMiUyMHZlcn ...

  5. (58)Wangdao.com第九天_JavaScript 对象的基本操作

    对象的基本操作 创建对象 var 对象名 = new Object();        // new 函数;    称为构造函数,专门用来创建对象的函数 var god =  给对象增加属性 删除对象 ...

  6. STM32 逐次逼近寄存器型(SAR)模拟数字转换器(ADC)

    是采样速率低于5Msps (每秒百万次采样)的中等至高分辨率应用的常见结构. SAR ADC的分辨率一般为8位至16位,具有低功耗.小尺寸等特点. 这些特点使该类型ADC具有很宽的应用范围,例如便携/ ...

  7. 关于RabbitMQ关键性问题的总结

    摘要:本篇是本人对RabbitMQ使用的关键性问题进行的总结,如性能上限.数据存储.集群等, 具体的RabbitMQ概念.安装.使用方法.SpringAMQP配置,假设读者已有了基础. 1.      ...

  8. 你真的会用Gson吗?Gson使用指南(4)

    原文出处: 怪盗kidou 注:此系列基于Gson 2.4. 本次文章的主要内容: TypeAdapter JsonSerializer与JsonDeserializer TypeAdapterFac ...

  9. fetch使用的常见问题及其解决办法

    摘自: https://segmentfault.com/a/1190000008484070 fetch使用的常见问题及其解决办法 javascript wonyun 2月25日发布 |   0 收 ...

  10. 回顾2018年最受欢迎的十四款NoSQL产品

    ​​虽然NoSQL的流行与火起来才短短一年的时间,但是不可否认,现在已经开始了第二代运动.尽管早期的堆栈代码只能算是一种实验,然而现在的系统已经更加的成熟.稳定.不过现在也面临着一个严酷的事实:技术越 ...