css3图片透明度过渡 |在css中更改图片路径无效

实现图片透明度过渡的方式主要有两种：

/* 第一种：使用 opacity 属性 */
img {
opacity: 1; /* 初始透明度为 1，即不透明 */
transition: opacity 1s; /* 过渡时间为 1s */
}
img:hover {
opacity: 0.5; /* 移动鼠标指针到图片上时，透明度变为 0.5 */
}

在上面的代码中，大家使用了 opacity 属性来实现图片的透明度调整。在 img:hover 伪类中，大家将透明度设置为 0.5，以达到鼠标悬浮在图片上时背景颜色变浅的效果，过渡时间为 1 秒。

/* 第二种：使用 rgba() 函数 */
img {
background: rgba(255, 255, 255, 1); /* 初始透明度为 1，即不透明 */
transition: background 1s; /* 过渡时间为 1s */
}
img:hover {
background: rgba(255, 255, 255, 0.5); /* 移动鼠标指针到图片上时，透明度变为 0.5 */
}

在上述代码中，大家使用了 rgba() 函数来实现背景颜色的透明度调整。由于 rgba() 函数中的最后一个参数表示的是不透明度（即透明度的倒数），所以大家将初始透明度设置为 1，即不透明。在 img:hover 伪类中，大家将不透明度设置为 0.5，以达到与第一种方式相同的效果。

总之，无论是哪种方式，都可以轻松实现图片透明度过渡效果。而随着 CSS3 技术的不断更新，大家可以使用越来越多的方式来实现更为自然流畅的过渡效果。