玩转CSS3色彩[译]
作者:vocal 来源:前端观察 发布时间:2010-01-13 13:02:00
传统来说,大家在CSS中使用的颜色要么是16进制格式,要么是rgb格式,就像rgb(171,205,239)。
CSS3带来了一些新的处理颜色的方法,比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是,现在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的浏览器完全支持它们。但是我们可以尽我们所能,而IE直到Internet Explorer 9才会开始支持一些CSS3属性。
Opacity
这其实是一个旧属性,令人惊奇的是,它被IE的当前版本支持——尽管是以一种比较复杂的方法。
Opacity将整个CSS 对象变透明,所有的子元素的透明度也会适当的继承。官方的语法如下:
opacity: [0-1的小数];
所以一个opacity: 0.5;设置会让对象50%透明。尽管较新的浏览器积极的支持它,老的浏览器还是需要一些定制的代码,就像IE浏览器一样。
目前较老的Firefox版本,我们需要使用-moz-前缀,而对于旧的Safari/Chrome版本,我们需要使用-webkit-前缀。而对于更老的还在使用KHTML内核而不是webkit内核的Safari版本来说,我们需要使用-khtml-。那么如果我们想支持每一个浏览器,我们的代码应该是这样的:
opacity: 0.5;
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
-khtml-opacity: 0.5;
啊,稍等!IE怎么办?好吧,IE的确完全不支持这个,但是它使用了一个私有的滤镜。传统的方法简短扼要:
filter:alpha(opacity=50);
请注意对于IE我们需要使用从0到100的整数,而不是像opacity属性那样的小数。郁闷的是,Internet Explorer 8提供了一个新的方法来处理。不要尝试像另一个那样记住这个,这是很长的一个:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
当然,如果你想支持旧的IE浏览器,你将不得不使用上面的那个短的,这也就意味着如果要兼容绝大部分浏览器,你需要总共六条CSS语句。
PS:事实上,Safari从1.2版本(2004年)就开始支持opacity属性了,KHTML内核的Safai基本很难再找到了,而事实上,Konqueror从未支持过-khtml-opacity属性,所以请不要再使用它(我在翻译的时候考虑到原文的完整性,所以并没有对上面的代码作出修正)。Opera从9.0开始支持CSS3的opacity,而Firefox直到3.5才原生支持opacity。IE8的-ms-再加上filter真是微软的天才作品啊!不过请注意,如果你要同时使用filter和-ms-filter,请注意将-ms-filter写在filter的前面。——神飞


猜你喜欢
- 1、开头:#!/usr/bin/python和# -*- coding: utf-8 -*-的作用 – 指定#!/usr/bin/pytho
- 敲了这么多年代码,每年都得画一些心啊花啊什么的,所以现在常规的已经有些倦怠了,至少也得来个三维图形才看着比较合理,而且光是三维的也没啥意思,
- 本文实例讲述了Python爬虫PyQuery库基本用法。分享给大家供大家参考,具体如下:PyQuery库也是一个非常强大又灵活的网页解析库,
- 本文实例为大家分享了opencv实现图像校正的具体代码,供大家参考,具体内容如下1.引言:python实现倾斜图像校正操作2.思路流程:(1
- python中zip函数返回一个以元组为元素的列表,其中第 i 个元组包含每个参数序列的第 i 个元素。返回的列表长度被截断为最短的参数序列
- /************************************************************ * Code
- 在C#或者Java里面我们都知道,一个Class是要包含成员变量和方法的,对于GO语言的Struct也一样,我们也可以给Struct定义一系
- 正好最近的域名备案通过了,兴起就突然想做一个网页,虽然之前去备案域名也是有这个目的。问过几个人,说用linux上用PHP搭建网站很简单,就试
- 2022-09-29shell操作:我在使用中是pycharm与数据库建立连接的一个工具。使用的环境:在此处是用在了虚拟环境中。使用场景:一
- 定位篇UI 自动化很多时候的苦恼都是定位不到,其实说实话我到现在有时候也是莫名其妙的定位到或者定位不到。好在这个框架定位方式的上限非常以及特
- 第一个示例: 简单的jsp自定标签获取内容: 首先创建一个jsp实例类然后继承SimpleTagSupport类 然后实现父类的doTag(
- 发现一个非常强的CSS在线排版:CSS Text Wrapper只要你拖拽线条,你就可以得到你想要的文字版式CSS代码。可以让想让文本块呈现
- 环境:win10+phpstorm2022+phpstudy8+lnmp1、phpinfo(); 查看是否安装xdebug,没有
- 如何制作一个弹出式的调查窗口?执行下面这段ASP代码: <% &n
- 前端部分(Vue + Vant)引入Vant、使用Vant中的Uploader组件上传文件(支持手机拍照)import Vue from &
- 本文实例为大家分享了Vue实现web分页组件的具体代码,供大家参考,具体内容如下效果演示源代码<!DOCTYPE html>&l
- JIRA介绍: JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪、需求
- 作者认为最快的学习区块链的方式是自己创建一个,本文就跟随作者用Python来创建一个区块链。对数字货币的崛起感到新奇的我们,并且想知道其背后
- 目录一、Go调用C代码的原理二、在Go中使用C语言的类型1、原生类型数值类型指针类型字符串类型数组类型2、自定义类型枚举(enum)结构体(
- 在许多情况下,对外键使用更复杂的逻辑表达式是非常有用的。 此外,在某些情况下能够在索引视图创建约束也将非常实用。 我将举例说明,同时我希望针