Javascript 如何将半不透明图像设置在其他图像之上？

嗯，在我开始之前我得问一些复杂的问题。我有一个网站，上面有工人的面部图像。所有图像都有圆角。我考虑过这样一个想法，我可以输出带有假圆角和不透明内部的图像，这样下方工人的照片就可以放进去

---

有什么方法可以做到这一点吗？

有一些方法可以实现你想要的

您可以将

div

与

width

和

height

一起使用，然后在其上应用圆角图像

您可以只使用

border radius

属性，该属性具有非常好的现代浏览器支持（带有供应商前缀），例如：

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

---

祝你好运；）

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

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

---

在本例中，图像“border.png”将显示在“worker\u photo.png”上。如果它们的尺寸相同，它看起来就会和你想要的一模一样。但对于圆角，前面的回答更好。：）

很酷，除了Chrome之外的所有浏览器都按预期显示图像。Chrome根据图像宽度的大小将正确的图像移动到另一侧。有什么想法吗？