如何在其他圖像上設置半透明圖像？

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; 
   } 
   

祝你好運;）