个性化阅读
专注于IT技术分析

css透明度opacity – CSS高级教程

点击下载

上一章CSS高级教程请查看:css精灵sprite

CSS属性指定元素的透明度。

跨浏览器的不透明度

不透明性现在是CSS3规范的一部分,但它已经存在了很长时间。然而,旧的浏览器有不同的方式来控制不透明度或透明度。

在Firefox, Safari, Chrome, Opera和IE9中的CSS不透明度

下面是所有当前浏览器中最新的CSS不透明度语法。

p {
    opacity: 0.7;
}

上面的样式规则将使段落元素70%不透明(或30%透明)。

不透明度属性的值从0.0到1.0,不透明度设置为1将使元素完全不透明(即0%透明),而不透明度为0将使元素完全透明(即100%透明)。

在Internet Explorer 8和更低中的CSS不透明度

Internet Explorer 8和更早的版本支持一个只支持微软的属性“alpha过滤器”来控制一个元素的透明度。

p {
    filter: alpha(opacity=50);
    zoom: 1;  /* Fix for IE7 */
}

注意:Alpha过滤器在IE中接受从0到100的值。值0使元素完全透明(即100%透明),而值100使元素完全不透明(即0%透明)。

所有浏览器的CSS不透明度

结合以上两个步骤,你将得到所有浏览器的不透明度。

p {
    opacity: 0.5;  /* 现代浏览器的不透明度 */
    filter: alpha(opacity=50);  /* IE8和更低的不透明度 */
    zoom: 1;  /* Fix for IE7 */
}

警告:在Internet Explorer 8和更低版本中包含alpha过滤器来控制透明度会在样式表中创建无效代码,因为这是一个只针对微软的属性,而不是一个标准的CSS属性。

CSS图像不透明度

你也可以使用CSS不透明度来制作透明的图像。

下图中的三幅图像都来自同一源图像,它们之间唯一的区别是它们的不透明性。

CSS图像不透明度

更改mouse over图像不透明度

下面的示例演示了CSS图像不透明度的一种常见用法,当用户将鼠标指针移到图像上时,图像的不透明度会发生变化。

更改mouse over图像不透明度

透明框文本

当在一个元素上使用不透明度时,不仅元素的背景将具有透明度,而且它的所有子元素也将变得透明。如果不透明度值变高,透明元素内的文本将难以阅读。

透明框文本

为了防止这种情况,你可以使用透明的PNG图像,或者将文本块放在透明框外,然后使用负边缘或CSS定位将其可视地推入框内。

div {
    float: left;
    opacity: 0.7;
    border: 1px solid #949781;
}
p {
    float: left;
    position: relative;
    margin-left: -400px;
}

使用RGBA CSS透明度

除了RGB之外,CSS3还引入了一种新的RGBA方法来指定一种颜色,其中包括alpha透明度作为颜色值的一部分。RGBA代表红蓝绿Alpha。

RGBA声明是设置颜色透明度的一种非常简单的方法。

div {
    background: rgba(200, 54, 54, 0.5);
}
p {
    color: rgba(200, 54, 54, 0.25);
}

前三个数字表示RGB值中的颜色,即红色(0-255)、绿色(0-255)、蓝色(0-255)和第四个数字表示0到1之间的alpha透明值(0表示颜色完全透明,而1表示颜色完全不透明)。

关于RGBA透明度需要注意的一个重要特性是——控制单个颜色不透明度的能力。使用RGBA,我们可以使一个元素的文本颜色透明,并保持背景完整。

RGBA透明度

或者保持文本的颜色不变,只改变背景的透明度。

RGBA透明度2

你可以看到很容易你可以控制单个颜色的透明度,而不是使用RGBA整个元素,然而总是建议定义一个回退颜色的浏览器不支持RGBA颜色。

注意:RGBA透明度并不影响子元素的方式不透明属性,RGBA的alpha值影响个别颜色的透明度,而不是整个元素。

声明一个备用的颜色

所有的浏览器不支持RGBA颜色,然而,你可以提供一个替代等纯色或透明的PNG图像浏览器不支持它。

p {
    /* 不支持RGBA的web浏览器的备份 */
    background: rgb(0, 0, 0);
    /* RGBa 0.5 opacity */
    background: rgba(0, 0, 0, 0.5);
}

警告:Internet Explorer 8和更早的版本不支持RGBA颜色,他们使用渐变过滤器来实现RGBA效果,这是不建议的。

赞(0)
未经允许不得转载:srcmini » css透明度opacity – CSS高级教程

评论 抢沙发

评论前必须登录!