CSS Opacity(透明度)

opacity CSS属性指定元素的透明度。opacity属性指定了一个元素的透明度。换言之,opacity属性指定了一个元素后面的背景的被覆盖程度。

跨浏览器透明度

现在,透明度(opacity )是CSS3规范的一部分,但是它存在了很长时间。但是,较旧的浏览器具有不同的方式来指定不透明度或透明度。

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

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

css 复制代码
p {
    opacity: 0.7;
}

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

opacity属性的取值范围为0.0到1.0。设置为opacity: 1;会使元素完全不透明(即0%透明),opacity: 0;而使元素完全透明(即100%透明)。

Internet Explorer 8及更低版本中的CSS透明度实现方法

Internet Explorer 8和更早版本支持仅Microsoft的属性" alpha过滤器"来指定元素的透明度。

css 复制代码
p {
    filter: alpha(opacity=50);
    zoom: 1;  /* Fix for IE7 */
}

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

兼容所有浏览器的CSS透明度

结合以上两个步骤,您将获得所有浏览器透明性代码

css 复制代码
p {
    opacity: 0.5;  /* Opacity for Modern Browsers */
    filter: alpha(opacity=50);  /* Opacity for IE8 and lower */
    zoom: 1;  /* Fix for IE7 */
}

警告: 包括alpha过滤器以指定Internet Explorer 8和更低版本中的透明性,因为这是仅Microsoft的属性,而不是标准的CSS属性,所以在样式表中会创建无效的代码

CSS图像透明度

您还可以使用CSS Opacity制作透明图像。

透明框中的文字

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

为了防止这种情况,您可以使用透明的PNG图像,也可以将文本块放在透明框的外面,然后使用负边距CSS定位将其可视地推入内部。## 使用RGBA的CSS透明度

除RGB外,CSS3还引入了一种新的方法RGBA来指定一种颜色,该颜色包括alpha透明度作为颜色值的一部分。RGBA代表Red Blue Green Alpha。

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

css 复制代码
div {
    background: rgba(200, 54, 54, 0.5);
}
p {
    color: rgba(200, 54, 54, 0.25);
}
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代表Red Blue Green Alpha。

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

css 复制代码
div {
    background: rgba(200, 54, 54, 0.5);
}
p {
    color: rgba(200, 54, 54, 0.25);
}

您会看到使用RGBA可以轻松地指定单个颜色而不是整个元素的不透明度。但是,始终建议为不支持RGBA颜色的浏览器定义后备颜色。 注意: RGBA透明度不会像opacity属性一样影响子元素。RGBA的alpha值影响单个颜色而不是整个元素的透明度。 警告: Internet Explorer 8和更早版本不支持RGBA颜色。他们使用渐变滤镜来实现不推荐使用RGBA的效果。

引用

菜鸟教程

相关推荐
前端小灰狼1 小时前
Ant Design Vue Vue3 table 表头筛选重置不清空Bug
前端·javascript·vue.js·bug
前端付豪1 小时前
11、JavaScript 语法:到底要不要写分号?一文吃透 ASI 与坑点清单
前端·javascript
Copper peas1 小时前
Vue 中的 v-model 指令详解
前端·javascript·vue.js
前端小书生1 小时前
NestJs
前端·nestjs
万少1 小时前
十行代码 带你极速接入鸿蒙6新特性 - 应用内打分评价
前端·harmonyos
一写代码就开心1 小时前
VUE 里面 Object.prototype 是什么,如何使用他
前端
GHOME1 小时前
vue3中setup语法糖和setup函数的区别?
前端·vue.js·面试
lecepin1 小时前
AI Coding 资讯 2025-09-25
前端·javascript·后端
前端_逍遥生2 小时前
Vue3 响应式数据最佳实践速查表
前端·vue.js
KenXu2 小时前
EMP微前端实现Vue2、Vue3、React各版本调用方案
前端