CSS - 不透明度

CSS 不透明度属性

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

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

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

句法

本章将介绍 CSS opacity 属性的使用，该属性可以采用以下值之一： -

number -它表示为从 0 到 1 的十进制数。
百分比 -它表示为从 0% 到 100% 的百分比。

下表显示了不同的不透明度值：

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

CSS 不透明度 - 值

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

这是一个例子 -

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

CSS 不透明度 - 百分比

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

这是一个例子 -

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

CSS 图像不透明度

以下示例演示如何使用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="images/tutimg.png" alt="Tutorialspoint">
      <img class="second-img" src="images/tutimg.png" alt="Tutorialspoint">
      <img class="third-img" src="images/tutimg.png" alt="Tutorialspoint">
   </div>
</body>
</html>

图像悬停效果的 CSS 不透明度

下面的示例演示了如何使用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="images/tutimg.png" alt="redFlower">
   </div>
</body>
</html>

CSS 不透明度与 RGBA 颜色值

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

<html>
<head>
<style>
   div {
      width: 200px;
      padding: 10px;
      text-align: center;
   }
   .my-opacity1 {
      background-color: rgba(227, 220, 11);
      opacity: 0.1;
   }
   .my-opacity2 {
      background-color: rgba(227, 220, 11);
      opacity: 0.3;
   }
   .my-opacity3 {
      background-color: rgba(227, 220, 11);
      opacity: 0.6;
   }
   .my-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>Tranparent element</h4>
      <div class="my-opacity1">
         CSS Opacity 0.1
      </div>
      <div class="my-opacity2">
         CSS Opacity 0.3
      </div>
      <div class="my-opacity3">
         CSS Opacity 0.6
      </div>
      <div class="my-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>

以下示例显示当用户单击按钮时元素的不透明度如何更改为指定值。

<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: 250px;
      padding: 5px;
      transition: opacity 0.3s ease;
      text-align: center;
      margin-left: 35%;
   }
</style>
</head>
<body>
   <p>Click the buttons to see how the opacity changes.</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">Tutorialspoint CSS Opacity</h3>
   <script>
      function changeOpacity(opacityValue) {
         var selectElement = document.getElementById("heading");
         selectElement.style.opacity = opacityValue;
      }
   </script>
</body>
</html>