How to set half-opaque image above other image?

Well, i have to ask something complicated before i even start. I have a website on which there are facial images of 开发者_如何学Pythonworkers. All images have rounded corners. I thought about idea that i can export image with fake rounded corners and opaque inside so photo of worker which is beneath can fit in.

Is there some way to do that?

In case you really need to put an image on top of the other one, just use the z-index property:

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

In this case, the image "border.png" will show up over the "worker_photo.png". If they have the same size, it will look exactly like what you want. But for rounded corners the previous reply is better. :)

There are some ways of preforming what you want.

1. you could use a div with width and height set, and then apply the rounded corners image on it.

2. You could just use the border-radius property which has a very good modern browser support (with vendor prefixes), example:

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

Good luck ;)