css怎么做半透明图片

CSS可以实现半透明图片，这在美化网页时非常常见。

要实现半透明图片，需要先将图片转换为透明。这可以通过CSS的opacity属性来实现。opacity可以设置为0到1之间的数值，数值越小，图片越透明。例如：

img {
  opacity: 0.5;
}

上面的代码可以将图片的透明度设置为50%。

而要让图片只有部分区域透明，可以使用CSS的mask-image属性。mask-image可以指定一个遮罩图片来遮盖原始图片，遮罩图片中的黑色区域将会变为透明。例如：

img {
  mask-image: url("mask.png");
}

上面的代码可以将mask.png作为遮罩图片，其中黑色区域将会变为透明。

需要注意的是，mask-image目前还不是所有浏览器都支持。可以使用-webkit-mask-image来兼容webkit内核的浏览器：

img {
  -webkit-mask-image: url("mask.png");
  mask-image: url("mask.png");
}

最后，如果要同时使用opacity和mask-image，可以将它们放在一起：

img {
  opacity: 0.5;
  -webkit-mask-image: url("mask.png");
  mask-image: url("mask.png");
}

这样可以同时实现半透明和部分透明的效果。