CSS实现透明度效果的两种方法—— opacity 和 rgba()

最新推荐文章于 2025-07-24 10:39:13 发布

前端小云儿

最新推荐文章于 2025-07-24 10:39:13 发布

阅读量865

点赞数

CC 4.0 BY-SA版权

分类专栏：前端静态页面以及逻辑文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/jieweiwujie/article/details/134390830

前端静态页面以及逻辑专栏收录该内容

150 篇文章 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

本文介绍了CSS中实现透明效果的两种主要方法：opacity属性和rgba颜色函数。通过opacity，你可以设置元素的整体透明度，而rgba()允许你为颜色指定透明度，保持其他颜色属性不变。这两种方法在前端开发中常用于创建视觉层次感和交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <div>CSS实现透明度效果的两种方法—— opacity 和 rgba()</div>
    <h3>第一种 opacity 属性</h3>
    <h4>
      opacity: alpha; alpha 取值范围为 0~1，值越小越透明( 0 表示完全透明，1
      表示完全不透明
      )，任何一个溢出这个取值区间的值都会被解析为在取值范围内最靠近它的值
    </h4>
    <h4>opacity的效果会作用到子元素</h4>
    <div class="outer">
      <div class="inner"></div>
    </div>

    <h3>第二种 rgba() 函数</h3>
    <h3>
      rgba() 函数根据颜色的红色、绿色和蓝色成分来表达颜色，可选的 alpha
      参数设置颜色的透明度。语法如下。
    </h3>
    <h3>
      rgba(r, g, b, alpha) R、G、B 每个都是从 0 到 255 之间的整数，或从 0%
      到100% 之间的 百分比，或者为关键字 none，分别代表红色、绿色和蓝色的通道。
      可选 alpha 值（可以是百分比或0~1之间的数字）或者关键字 none，数字 1
      对应100%（完全不透明）。
    </h3>
    <h3>