css3 让图片渐变透明 |css中背景色为透明

img {
opacity: 0.7; /* 设置透明度为0.7，即30%不透明 */
-moz-opacity: 0.7; /* Firefox 早期版本 */
-webkit-opacity: 0.7; /* Safari和chrome早期版本 */
}

以上代码将图片的透明度设置为0.7，即30%不透明。如果想要实现渐变透明的效果，需要通过CSS3中的transition属性来实现。transition属性可以让元素在一段时间内逐渐地从一种样式变换到另一种样式。

img {
opacity: 1; /* 初始时图片不透明 */
-moz-opacity: 1; /* Firefox 早期版本 */
-webkit-opacity: 1; /* Safari和chrome早期版本 */
transition: opacity 1s; /* 过渡时长为1秒 */
-moz-transition: opacity 1s; /* Firefox 早期版本 */
-webkit-transition: opacity 1s; /* Safari和chrome早期版本 */
}
img:hover {
opacity: 0.5; /* 鼠标悬停时图片透明度变为0.5 */
-moz-opacity: 0.5; /* Firefox 早期版本 */
-webkit-opacity: 0.5; /* Safari和chrome早期版本 */
}

以上代码将图片的透明度设置为1，当鼠标悬停在图片上时，图片的透明度会逐渐变为0.5，过渡时长为1秒。这样就可以实现图片渐变透明的效果了。