Css 简明教程

CSS - opacity Property

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

CSS opacity property controls the transparency of an element. Opacity determines how much of a hidden element’s content is visible.

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

You can use the opacity property on various elements, whether they contain text, images, or serve as backgrounds.

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

This property is used to creating various visual effects, such as fading in/out, creating overlays, or making background images less prominent.

Possible Values

  1. <alpha-value> − A number that must be in the range of 0.0 to 1.0.

  2. <percentage> − A specific percentage value must be in the range of 0% to 100%.

Applies to

所有 HTML 元素。

All the HTML elements.

Syntax

opacity: 0.9;
opacity: 90%;

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

Following table showing the different opacity values:

CSS opacity - <alpha-value> Value

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

We can make an element’s background partially transparent but keeping the text inside visible by setting the element’s opacity property to a value between 0 and 1.

示例如下:

Here is an example −

<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% 之间的值,使元素的背景部分透明。

You can also use the opacity property with a percentage value to make an element’s background partially transparent by setting the element’s opacity property to a value between 0% and 100%.

示例如下:

Here is an example −

<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 属性创建部分透明图像的示例 −

Here’s an example demonstrating the use of the opacity property to create partially transparent images −

<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 属性制作透明图像的示例:

Here’s an example demonstrating the use of the opacity property to make a transparent image when the cursor hovers over it:

<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 颜色值,通过这种方式可以设置颜色的不透明度,而不影响其子元素。

The opacity property will make an element and all of its child elements transparent. To prevent this, you can use RGBA color values, which allow you to set the opacity of a color without affecting its child elements.

示例如下:

Here is an example −

<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

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

Here is an example of how to change the opacity of an element when the user clicks a button −

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