一、CSS半透明度基础

1.1 透明度属性

1.2 背景透明度

除了opacity属性，我们还可以使用rgba()（红、绿、蓝、透明度）和hsla()（色调、饱和度、亮度、透明度）函数来设置背景的透明度。

二、实现图片半透明效果

2.1 使用opacity属性

img {
  opacity: 0.5; /* 半透明效果 */
}

2.2 使用rgba()和hsla()函数

使用rgba()或hsla()函数可以更精确地控制背景的透明度：

img {
  background-color: rgba(255, 255, 255, 0.5); /* 背景半透明 */
}

或者

img {
  background-color: hsla(0, 0%, 100%, 0.5); /* 背景半透明 */
}

2.3 渐变透明效果

img {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* 渐变透明效果 */
}

三、鼠标悬停效果

img {
  transition: opacity 0.3s ease-in-out; /* 过渡效果 */
  opacity: 1; /* 默认不透明 */
}

img:hover {
  opacity: 0.5; /* 鼠标悬停时半透明 */
}

四、总结