CSS 属性

CSS opacity 属性控制元素的透明度。不透明度决定隐藏元素的内容有多少是可见的。

您可以在各种元素上使用不透明度属性，无论它们包含文本、图像还是用作背景。

此属性用于创建各种视觉效果，例如淡入/淡出、创建叠加或使背景图像不那么突出。

属性值

适用范围

所有 HTML 元素。

语法

opacity: 0.9;
opacity: 90%;

下表显示不同的不透明度值:

值描述
0元素完全透明且不可见。
0.5元素是半透明的。
1元素完全不透明且可见。

CSS opacity: <alpha-value> 

我们可以通过将元素的不透明度属性设置为 0 到 1 之间的值，使元素的背景部分透明，但保持内部文本可见。

这是一个示例 -

<html>
<head>
<style>
   .decimal-opacity {
      background-color: #d3360b;
      opacity: 0.4;
      padding: 10px;
      width: 150px;
      height: 110px;
   }
</style>
</head>
<body>
   <div class="decimal-opacity">
      <h3>CSS Opacity to 0.4</h3>
   </div>
</body>
</html>

CSS opacity: 百分比值

您还可以使用带有百分比值的不透明度属性来使元素的背景部分透明通过将元素的不透明度属性设置为 0% 到 100% 之间的值。

这是一个示例 -

<html>
<head>
<style>
   .percentage-opacity {
      background-color: #d3360b;
      opacity: 70%;
      padding: 10px;
      width: 150px;
      height: 110px;
   }
</style>
</head>
<body>
   <div class="percentage-opacity">
      <h3>CSS Opacity to 70%</h3>
   </div>
</body>
</html>

CSS opacity: 带图像

这是一个演示如何使用 opacity 属性创建部分透明图像的示例 -

<html>
<head>
<style>
   div {
      display: flex
   }
   .first-img {
      opacity: 0.1;
      margin: 10px;
      width: 170px;
      height: 130px;
   }
   .second-img {
      opacity: 0.5;
      margin: 10px;
      width: 170px;
      height: 130px;
   }
   .third-img {
      opacity: 1;
      margin: 10px;
      width: 170px;
      height: 130px;
   }
</style>
</head>
<body>
   <div>
      <img class="first-img" src="/css/images/tutimg.png" alt="Yxjc123">
      <img class="second-img" src="/css/images/tutimg.png" alt="Yxjc123">
      <img class="third-img" src="/css/images/tutimg.png" alt="Yxjc123">
   </div>
</body>
</html>

CSS opacity: 图像悬停效果

这里是一个示例，演示如何使用 opacity 属性创建透明图像当光标悬停在其上时:

<html>
<head>
<style>
   div {
      display: flex
   }
   .opacity-image {
      opacity: 1;
      margin: 10px;
      width: 170px;
      height: 130px;
   }
   .opacity-image:hover {
      opacity: 0.3;
   }
</style>
</head>
<body>
   <h3>Hover Over an image</h3>
   <div>
      <img class="opacity-image" src="/css/images/tutimg.png" alt="Yxjc123">
   </div>
</body>
</html>

CSS opacity: 使用 RGBA 颜色值

opacity 属性将使元素及其所有子元素透明。为了防止这种情况，您可以使用 RGBA 颜色值，它允许您设置颜色的不透明度而不影响其子元素。

这里是一个示例 -

<html>
<head>
<style>
   div {
      width: 200px;
      padding: 10px;
      text-align: center;
   }
   .decimal-opacity1 {
      background-color: rgba(227, 220, 11);
      opacity: 0.1;
   }
   .decimal-opacity2 {
      background-color: rgba(227, 220, 11);
      opacity: 0.3;
   }
   .decimal-opacity3 {
      background-color: rgba(227, 220, 11);
      opacity: 0.6;
   }
   .decimal-opacity4 {
      background-color: rgba(227, 220, 11);
      opacity: 0.9;
   }
   .rgba-opacity1 {
      background-color: rgba(227, 220, 11, 0.1);
   }
   .rgba-opacity2 {
      background-color: rgba(227, 220, 11, 0.3);
   }
   .rgba-opacity3 {
      background-color: rgba(227, 220, 11, 0.6);
   }
   .rgba-opacity4 {
      background-color: rgba(227, 220, 11, 0.9);
   }
   .transparent-container {
         margin-left: 50px;
         float: left;
   }
   .regba-container {
         margin-left: 50px;
         float: left;
   }
</style>
</head>
<body>
   <div class="transparent-container">
      <h4>透明元素</h4>
      <div class="decimal-opacity1">
         CSS Opacity 0.1
      </div>
      <div class="decimal-opacity2">
         CSS Opacity 0.3
      </div>
      <div class="decimal-opacity3">
         CSS Opacity 0.6
      </div>
      <div class="decimal-opacity4">
         CSS Opacity 0.9
      </div>
   </div>
   <div  class="regba-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>

CSS opacity: 通过操作进行更改

以下是如何在用户单击按钮时更改元素的不透明度的示例 -

<html>
<head>
<style>
   .opacity-container {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
   }
   .opacity-button {
      background-color: #0cc42b;
      border: none;
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
      width: 90px;
      height : 40px;
   }
   #heading {
      background-color: #d7e20c;
      width: 150px;
      height: 60px;
      padding: 5px;
      transition: opacity 0.3s ease; 
      text-align: center;
      margin-left: 35%;
   }
</style>
</head>
<body> 
   <p>单击按钮查看不透明度如何变化。</p> 
   <div class="opacity-container">
      <button class="opacity-button" onclick="changeOpacity(0)">0 opacity</button>
      <button class="opacity-button" onclick="changeOpacity(0.3)">0.3 opacity</button>
      <button class="opacity-button" onclick="changeOpacity(0.6)">0.6 opacity</button>
      <button class="opacity-button" onclick="changeOpacity(0.9)">0.9 opacity</button>
      <button class="opacity-button" onclick="changeOpacity(1)">1.0 opacity</button>
   </div>
      <h3 id="heading">Yxjc123 CSS Opacity</h3>
   <script>
      function changeOpacity(opacityValue) {
         var selectElement = document.getElementById("heading");
         selectElement.style.opacity = opacityValue;
      }
   </script>
</body>
</html>