技术头条(投递你的文章)     搜索本站     邮件订阅     微信号:IT技术博客大学习
您现在的位置首页 --> CSS/HTML --> 小叙透明

小叙透明

浏览:275次  出处信息


   网页的历史不长,但是几经变化,不论是从布局,文字,颜色搭配,图标等等,都是有过诸多的演变,人们的审美不同了,或者说,一直在追求更美观的效果。

   拿一些细节方面来说,比如渐变,圆角,阴影,半透明,这几个应该是被用的最多,效果也很好的方法。其中前三个,都可以做到比较好的退化,甚至说牺牲,因为很多时候,即使它们在一些浏览器里有,另一些浏览器里没有,看起来也能让人接受,不会产生太大的影响,半透明就不同了,透明和不透明的差别还是蛮大的,那么今天就来聊聊“透明”。

   透明还分为两种,半透明的纯色背景透明的图片

   背景透明的图片

   大家都知道这个在IE6下会不支持,图片是有格式的,what格式会出问题? 我们网页中常用格式jpg、png24/png8、gif,其中后面两者是透明的,而会出现问题的只是png24格式,见下图

   

应该看出来了,它不仅仅是背景不透明还会出现比较明显的锯齿。 其实说到这里,想到一个问题,还管IE6干嘛。。。不过真有一部分需求是要管的,所以, 如果还有兴趣做了解的话,那么大家可以看看这篇文章  使IE6下PNG背景透明的七种方法任你选

   那图片就不用多谈了(好懒呐~)

   半透明背景色

   Css的什么属性可以做到这点呢?

   Opacity:0~1,取值为小数(常见1位小数,多位亦可)。纯控制透明度,适用IE9及以上浏览器和其他主流浏览器。

   filter(IE私有属性),写法filter:alpha(opacity=50); 适用IE8及以下浏览器,产生类opacity效果。

   Rgba:控制背景色和透明度,适用IE9及以上浏览器和其他主流浏览器。

   低版本IE使用滤镜,例如: filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#80000000,endColorStr=#80000000);

   其中参数值是 #AARRGGBB 形式的,AA是代表不透明度的十六进制,00表示完全透明,FF就是全不透明,化成十进制的范围就是0~255,剩下的 RRGGBB 就是颜色的十六进制代码。

   其实我在想怎么不能有一个东西搞定所有?事实证明这是有难度的,技术在发展,标准在行进,厂商支持也不同。

   哪里会有问题呢?

   不少需求里面都会需要用背景透明,那么该怎样去选择这些透明来为自己服务呢?

   现在做技术的同行有些是“实用主义”,不管方法是怎样,可以达到目的就行;有些是“能用主义”,只要找到一种方法行,就用了。这两种情况一般都不会去深究,只看效果,通常遇到这样的问题的路径就是想起“opacity”一用,好像不对,一下都变得朦胧了,比如这样

   

   然后查查还有什么比较好的解决方案,找到了rgba,一用果然不亦乐乎,

   再一看,浏览器支持貌似不好啊!连IE8都挂了。

   那到底该怎么办

   其实上面已经给出办法了不是么,只是需要说的是二者的不同使用场景,

   opacity是用来控制透明度,注意,前面没有“背景”二字,所以,它以及它的子元素都会受到影响。那么这种就适合做啥呢?对了,ps中的蒙板效果。你还会嫌弃它使内容也透明吗?别的想做还难呢,正所谓,各司其职~

   有些人应用opactiy,多加了一层在外面当做“背景”,然后使用定位把不想透明的内容叠放在上面,此法实为下策。

   rgba是在rgb色值的基础上,加了alpha通道的透明度,所以,它控制的是背景色。

那要使得背景透明,内容不透明,该怎么做呢?

   rgba+IE滤镜

   只是有几点需要注意:

   1.IE6、7不认识alpha,需要激活IE的haslayout属性(如:*zoom:1或者*overflow:hidden),让它读懂filter:Alpha;

   2.滤镜能够支持到IE9,那么IE9到底该听谁的?会重复的起作用?是的,所以,还是需要区分开来,即使是平时写浏览器兼容的时候也是最好做个区分,不要让那些代码在所有浏览器里都加载,虽然它们起不了什么作用。

   3、在父元素position:static;子元素position:relative;的情况下子元素才不会受影响,否则其仍将变成了透明的。

   代码如下:

css:.solve{  background-color:rgb(190,255,252);  filter:alpha(opacity=20);  background:rgba(190,255,252,0.5);*zoom:1;}.solve h2,.solve img{  position: relative;}html:<div class="solve"><h2>解决方案</h2><img src="images/pngdemo_8.png"></div>

   对比效果

   

   没做特殊设置的下场

   

   需要指出的是,rgba()它是用来定义色值的,也就是说,它不专属于背景,比如我们偶尔也会碰到透明的边框等等,也是同样适用的,除了在个别浏览器下可能支持会有小的差异。

   还有一种不常用的HSLA,它和rgba异曲同工,比如background:hsla(165, 35%, 50%, 0.2);这样,设置颜色和透明度。 具体如下:

   使用色调Hue(H)、饱和度Saturation(s)和亮度Lightness(L)来设置颜色。

   Hue衍生于色盘:0和360是红色,接近120的是绿色,240是蓝色。

   Saturation值是一个百分比:0%是灰度,100%饱和度最高。

   Lightness值也是一个百分比:0%是最暗,50%均值,100%最亮。

   好了,这次聊的不多,不过还是希望能够帮到一部分朋友。问题多多,来日方长,咱下次见呗!~

   推荐文章:css实现背景透明文字不透明


觉得文章有用?立即: 和朋友一起 共学习 共进步!

建议继续学习:

  1. CSS实现HTML元素透明的那些事    (阅读:1042)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
作者微博
© 2009 - 2017 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号