不透明度 (opacity)

一、opacity 概述

opacity 属性指定了一个元素的不透明度。

属性值

属性值	描述
`0`	元素完全透明(即元素不可见)
`0.0 - 1.0`	元素半透明(元素后面的背景可见),值越大,元素透明度越低
`1`	元素完全不透明(即元素后面的背景不可见)

二、基本用法

案例演示

<style>
  .item {
    width: 100px;
    height: 100px;
    background-color: pink;
    float: left;
    margin: 10px 10px;
  }
  .item1 {
    /* 不透明度 0.8 */
    opacity: 0.8;
  }
  .item2 {
    /* 不透明度 0.5 */
    opacity: 0.5;
  }
  .item3 {
    /* 不透明度 0.1 */
    opacity: 0.1;
  }
</style>
<body>
  <div class="item item1">.item1</div>
  <div class="item item2">.item2</div>
  <div class="item item3">.item3</div>
</body>

三、注意事项

1. 值的范围

opacity 的值是一个 0.0 到 1.0 范围内的数字值
值如果大于 1,相当于 1
值小于 0,则相当于 0

2. 子元素继承

opacity 设置透明度时,其里面的子元素和内容也会被透明掉。

所以也可以用 opacity: 0; 来隐藏一个元素,及其里面的子元素一起隐藏掉。

3. 创建层叠上下文

opacity 的属性值不为 1 时,元素会创建自己的层叠上下文。

<style>
  .box {
    width: 100px;
    height: 100px;
  }
  .box1 {
    background-color: skyblue;
    /*
      opacity 的值不为 1 时,会创建层叠上下文
      即 opacity: 0.7 时,.box1 会在 .box2 的上面显示
    */
    opacity: 0.7;
  }
  .box2 {
    background-color: pink;
    margin-top: -50px;
    margin-left: 30px;
  }
</style>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
</body>

四、对比学习

属性	说明
`visibility: hidden`	隐藏元素,但元素还占着原有的空间,在 DOM 树中
`display: none`	元素隐藏,不占着原来空间,不在 DOM 树中
`background-color: rgba(0,0,0,0.1)`	仅背景颜色透明,并不影响元素中的内容
`opacity: 0`	元素透明,连同其内容和子元素一起透明掉
`overflow: hidden`	内容超出部分隐藏,影响的是子元素

五、实战应用场景

场景1: 悬停透明度变化

.card {
  opacity: 1;
  transition: opacity 0.3s;
}

.card:hover {
  opacity: 0.8;
}

场景2: 禁用状态

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

场景3: 加载状态

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transition: opacity 0.3s;
}

.loading-overlay.active {
  opacity: 1;
}

场景4: 图片淡入淡出

.gallery-image {
  opacity: 0;
  transition: opacity 0.5s;
}

.gallery-image.loaded {
  opacity: 1;
}

场景5: 遮罩层

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.modal-overlay.active {
  opacity: 1;
}

六、opacity vs rgba

区别对比

特性	`opacity`	`rgba()`
作用范围	整个元素及其子元素	仅背景颜色
对子元素影响	子元素也会变透明	不影响子元素
对文字影响	文字也会变透明	文字不受影响
应用场景	整体透明度调节	背景透明度调节

案例对比

<style>
  /* opacity 版本 - 整体透明 */
  .opacity-box {
    width: 200px;
    padding: 20px;
    background-color: blue;
    color: white;
    opacity: 0.5; /* 整个元素包括文字都变透明 */
  }
  
  /* rgba 版本 - 仅背景透明 */
  .rgba-box {
    width: 200px;
    padding: 20px;
    background-color: rgba(0, 0, 255, 0.5); /* 仅背景变透明 */
    color: white; /* 文字不透明 */
  }
</style>

<body>
  <div class="opacity-box">
    文字和背景都变透明
  </div>
  
  <div class="rgba-box">
    文字不透明,仅背景变透明
  </div>
</body>

七、性能优化

1. 使用 transform 代替 opacity 动画

/* ❌ 不推荐: opacity 动画在某些浏览器中性能较差 */
.element {
  transition: opacity 0.3s;
}

/* ✅ 推荐: 使用 will-change 提示浏览器 */
.element {
  will-change: opacity;
  transition: opacity 0.3s;
}

2. 避免频繁触发重绘

/* ❌ 不推荐: 在 JavaScript 中频繁修改 opacity */
element.style.opacity = '0.5';
element.style.opacity = '0.6';
element.style.opacity = '0.7';

/* ✅ 推荐: 使用 class 切换 */
.element.faded {
  opacity: 0.5;
}

// JavaScript
element.classList.add('faded');

八、浏览器兼容性

/* 旧版 IE */
.filter-box {
  opacity: 0.5;
  filter: alpha(opacity=50); /* IE8 及以下 */
}

css学习