如何在其他图像上方设置半透明图像？

Question

好吧，在我开始之前，我不得不问一些复杂的事情。我有一个网站上有工人的面部图像。所有图像都有圆角。我想到我可以导出带有假圆角和不透明内部的图像，因此下面的工人的照片可以适应。

有没有办法做到这一点？

Answer 1

如果您确实需要将图像放在另一个图像之上，只需使用z-index属性：

<img src="border.png" alt="" style="position: absolute; z-index: 1;" /> 
<img src="worker_photo.png" alt="" />   

在这种情况下，图像“border.png”将显示在“worker_photo.png”上。如果它们具有相同的尺寸，它将看起来与您想要的完全相同。但对于圆角，以前的回复更好。 ：）

Answer 2

有一些方法可以预先形成你想要的东西。

1. 您可以使用div设置width和height，然后在其上应用圆角图片。

2. 您可以使用具有非常好的现代浏览器支持的border-radius属性（带有供应商前缀），例如：

   img.employee {
       border-radius: 10px;
   }
   

祝你好运;）