要使图像透明或不透明，可以使用CSS中的opacity属性或rgba颜色值来设置透明度。以下是两种常见的方法：

1. 使用 opacity 属性：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>透明/不透明图像</title>
</head>
<body>
  <div class="transparent-image">
    <img src="your-image.jpg" alt="Your Image">
  </div>
</body>
</html>
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.transparent-image img {
  opacity: 0.5; /* 设置透明度，值从 0（完全透明）到 1（不透明） */
}

2. 使用 rgba 颜色值：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>透明/不透明图像</title>
</head>
<body>
  <div class="transparent-image">
    <div class="overlay"></div>
    <img src="your-image.jpg" alt="Your Image">
  </div>
</body>
</html>
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.transparent-image {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5); /* 设置透明度，最后一个值为透明度，值从 0（完全透明）到 1（不透明） */
}

在第一个方法中，我们直接在图像上使用 opacity 属性，它会影响整个元素及其内容。

在第二个方法中，我们在图像的父容器上添加了一个叠加层（overlay），并使用 rgba 颜色值设置了透明度。这样可以使背景透明而保持图像本身的不透明。根据需求，你可以调整透明度的值。


转载请注明出处：http://www.zyzy.cn/article/detail/12546/CSS