CSS 不透明度

CSS不透明度属性

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

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

该属性用于创建各种视觉效果，比如淡入/淡出、创建叠加层或减弱背景图像的显眼程度。

语法

本章将介绍CSS透明度属性的使用，可以使用以下值之一：−

number− 表示为0到1之间的小数。
percentage− 表示为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 透明度的图片悬停效果

下面的示例演示了如何使用 透明度 属性，在光标悬停在图片上时使其透明。

<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色彩值

透明度属性可以使元素及其所有子元素变为透明。为了避免这种情况，您可以使用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>