Css 简明教程

CSS - opacity Property

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

无论各种元素是否包含文本、图像，还是用作背景，都可以为其应用 opacity 属性。

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

Possible Values

  1. * <alpha-value>* − 一个介于 0.0 到 1.0 范围内的数字。

  2. * <percentage>* − 一个介于 0% 到 100% 范围内的特定百分比值。

Applies to

所有 HTML 元素。

Syntax

opacity: 0.9;
opacity: 90%;

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

CSS opacity - <alpha-value> Value

我们可以通过将元素的 opacity 属性设置为介于 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 - Percentage Value

还可以将 opacity 属性与 percentage 值一起使用，通过将元素的不透明度属性设置为介于 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 - With Images

这里是一个演示如何使用 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 - Image Hover Effect

这里是一个演示当光标悬停在其上方时使用 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="Tutorialspoint">
   </div>
</body>
</html>

CSS opacity - With RGBA Color Values

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>Tranparent element</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 - Change With An Action

这里有一个关于在用户单击按钮时更改元素的不透明度的示例 −

<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>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>