CSS - opacity 属性

CSS opacity 属性控制元素的不透明度。它决定了隐藏元素内容的可见程度。此属性可用于各种元素，无论它们包含文本、图像还是用作背景。

语法

opacity: number | percentage | initial | inherit;

属性值

值	描述
数字	可以使用 0 到 1（包括 0 和 1）之间的数值指定元素的不透明度。0 表示完全透明，1 表示完全不透明，0 到 1 之间的数值表示中间透明度。
百分比	可以使用百分比值指定元素的不透明度。0% 表示完全透明，100% 表示完全不透明，0% 到 100% 之间的数值表示中间透明度。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 不透明度属性示例

以下示例使用不同的值解释了opacity 属性。

使用数值的不透明度属性

为了设置元素的透明度，我们可以将 0 到 1（包括 0 和 1）之间的数值指定给opacity 属性。0 表示完全透明，而 1 表示完全不透明，0 到 1 之间的数值显示中间透明度效果。以下示例中使用了这些值。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .props {
         height: 50px;
         padding: 20px;
         text-align: center;
         font-weight: bold;
         font-size: 20px;
         background-color: lightgreen;
      }

      .first {
         opacity: 0.3;
      }

      .second {
         opacity: 0.6;
      }

      .third {
         opacity: 1;
      }
   </style>
</head>

<body>
   <h2>
      CSS opacity property
   </h2>
   <h4>
      opacity: 0.3
   </h4>
   <div class="props first">
      This div has opacity: 0.3
   </div>
   <h4>
      opacity: 0.6
   </h4>
   <div class="props second">
      This div has opacity: 0.6
   </div>
   <h4>
      opacity: 1
   </h4>
   <div class="props third">
      This div has opacity: 1
   </div>
</body>

</html>

使用百分比值的不透明度属性

为了设置元素的透明度，我们可以将 0% 到 100%（包括 0% 和 100%）之间的百分比值指定给opacity 属性。0% 表示完全透明，而 100% 表示完全不透明，0% 到 100% 之间的数值显示中间透明度效果。以下示例中使用了这些值。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .props {
         height: 50px;
         padding: 20px;
         text-align: center;
         font-weight: bold;
         font-size: 20px;
         background-color: lightgreen;
      }

      .first {
         opacity: 30%;
      }

      .second {
         opacity: 60%;
      }

      .third {
         opacity: 100%;
      }
   </style>
</head>

<body>
   <h2>
      CSS opacity property
   </h2>
   <h4>
      opacity: 30%
   </h4>
   <div class="props first">
      This div has opacity: 30%
   </div>
   <h4>
      opacity: 60%
   </h4>
   <div class="props second">
      This div has opacity: 60%
   </div>
   <h4>
      opacity: 100%
   </h4>
   <div class="props third">
      This div has opacity: 100%
   </div>
</body>

</html>

图像中的不透明度属性

透明度效果也可以用于图像。在以下示例中，图像使用了不同的opacity 值来显示效果。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .props {
         width: 300px;
         height: 150px;
      }

      .first-img {
         opacity: 0.1;
      }

      .second-img {
         opacity: 50%;
      }

      .third-img {
         opacity: 1;
      }
   </style>
</head>

<body>
   <h2>
      CSS opacity property
   </h2>
   <h4>
      opacity: 0.1
   </h4>
   <img class="first-img props" src="/css/images/logo.png" 
   alt="Tutorialspoint">
   <h4>
      opacity: 50%
   </h4>
   <img class="second-img props" src="/css/images/logo.png" 
   alt="Tutorialspoint">
   <h4>
      opacity: 1
   </h4>
   <img class="third-img props" src="/css/images/logo.png" 
   alt="Tutorialspoint">
</body>

</html>

使用 RGBA 颜色值的不透明度属性

opacity 属性将透明度应用于元素及其子元素。在许多情况下，这可能并不理想，因为所有子元素也变得透明。为了避免这种情况并仍然实现透明度，我们可以使用rgba 值。这些值仅指定元素的颜色和不透明度，而不是其子元素。以下示例中使用了这些值。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         width: 200px;
         padding: 10px;
         text-align: center;
      }

      .first-color {
         background-color: rgba(77, 77, 255);
      }

      .decimal-opacity1 {
         opacity: 0.1;
      }

      .decimal-opacity2 {
         opacity: 0.3;
      }

      .decimal-opacity3 {
         opacity: 0.6;
      }

      .decimal-opacity4 {
         opacity: 0.9;
      }

      .rgba-opacity1 {
         background-color: rgba(77, 77, 255, 0.1);
      }

      .rgba-opacity2 {
         background-color: rgba(77, 77, 255, 0.3);
      }

      .rgba-opacity3 {
         background-color: rgba(77, 77, 255, 0.6);
      }

      .rgba-opacity4 {
         background-color: rgba(77, 77, 255, 0.9);
      }

      .container {
         font-weight: bolder;
         margin-left: 50px;
         float: left;
      }
   </style>
</head>

<body>
   <h2>
      CSS opacity property
   </h2>
   <p>
      It is clear from the 
   <strong>
      transparent element
   </strong> 
      portion below, that the opacity property is 
      applied to all other elements present within 
      the element that uses opacity property. 
   </p>
   <p>
      To prevent this, we can make use of the 
   <strong>
      rgba values
   </strong> 
      which define the color along with opacity. The 
      opacity is applied only to the particular element 
      and not to the elements present within it.
   </p>
   <div class="container">
      <h4>
         Tranparent element
      </h4>
      <div class=" first-color decimal-opacity1">
         CSS Opacity 0.1
      </div>
      <div class="first-color decimal-opacity2">
         CSS Opacity 0.3
      </div>
      <div class="first-color decimal-opacity3">
         CSS Opacity 0.6
      </div>
      <div class="first-color decimal-opacity4">
         CSS Opacity 0.9
      </div>
   </div>
   <div class="container">
      <h4>
         With RGBA color values
      </h4>
      <div class="rgba-opacity1">
         CSS Opacity 10%
      </div>
      <div class="rgba-opacity2">
         CSS Opacity 30%
      </div>
      <div class="rgba-opacity3">
         CSS Opacity 60%
      </div>
      <div class="rgba-opacity4">
         CSS Opacity 90%
      </div>
   </div>
</body>

</html>

支持的浏览器

属性
opacity	4.0	9.0	2.0	3.1	9.0

css_properties_reference.htm

打印页面