CSS 图片透明度

CSS 透明度

使用 opacity 属性或像 RGBA 和 HSLA 这样的透明颜色值可以轻松实现 CSS 透明效果。

opacity 属性在现代浏览器中得到良好支持。

示例 1: 对图片应用透明度

opacity 属性设置整个元素的透明度级别，包括其内容和边框。值为 1.0 表示完全不透明（默认），值为 0.0 表示完全透明。

原始图片（透明度: 1.0）:

[此处想象一张铁线莲图片]

透明度设置为 0.5 的图片:

[此处想象同一张半透明图片]

CSS 代码如下:

img.transparent {
  opacity: 0.5;
}

注意: 旧版 IE 曾使用专有的 filter 属性，现在已不再需要。

示例 2: 透明度悬停效果

使用 :hover 伪类可以轻松创建元素在悬停时变得更透明或更不透明的效果。

将鼠标悬停在下面的图片上:

[此处想象两张并排放置的半透明图片]

CSS 代码如下:

img.hover-effect {
  opacity: 0.6;
  transition: opacity 0.3s ease; /* 可选: 添加平滑过渡 */
}

img.hover-effect:hover {
  opacity: 1.0;
}

这里，图片开始时是半透明的（opacity: 0.6）。当用户将鼠标悬停在图片上时，其透明度会变为 1.0（完全不透明）。transition 属性使这种变化变得平滑。

示例 3: 半透明背景框和不透明文本

如果在一个容器上使用 opacity 属性，其子元素（如文本）也会变得透明。要创建半透明背景而不影响文本，请为 background-color 使用 RGBA 或 HSLA 颜色值。

[此处想象一张背景图片。图片上方有一个白色框，框内有黑色文本。白色框的背景是半透明的，但黑色文本是完全不透明的。]

HTML 结构:

<div class="background-container">
  <div class="text-box">
    <p>This text is inside a box with a semi-transparent background, but the text itself remains fully opaque.</p>
  </div>
</div>

使用 RGBA 的 CSS:

.background-container {
  background: url('path/to/background.jpg') no-repeat center center;
  background-size: cover;
  padding: 50px;
}

.text-box {
  background-color: rgba(255, 255, 255, 0.7); /* 白色背景，70% 透明度 */
  padding: 20px;
  border: 1px solid #ccc;
}

.text-box p {
  color: #000000; /* 黑色文本，完全不透明 */
  font-weight: bold;
  margin: 0; /* 移除默认段落外边距 */
}

在这个示例中，rgba(255, 255, 255, 0.7) 将 .text-box 的背景设置为白色，透明度为 70%。关键在于，其内部段落的 color 属性保持完全不透明的黑色。