I am making a site with PHP where users upload images for their profile. I already have that working just fine. However, I want the users images to be circles. From what I have read I believe that I can not crop an image into a circle, I will have to mask the image to make part of the开发者_StackOverflow中文版 image transparent. I have really no idea where to start. I would really appreciate it if anyone could point me in the right direction, or maybe even some sample code!!!
You don't have to actually edit the image if you have a consistent page background. Fake it out like so...
<div style="width: 50px; height: 50px; background-image: url('path/to/user/image.jpg'); background-position: 0px 0px; background-repeat: no-repeat;">
<img style="margin: 0px; padding: 0px; border: none;" src="path/to/circle/mask.png" alt="" />
</div>
You could put quite a bit of this markup in your stylesheet too (to clean it up).
Just save the image as a square, and use rounded corners to crop the image.
You will set the image to be a background image in a div, and set the CSS to have rounded corners (enough to make your div a circle). You can use PIE to make this CSS mark up work on IE 6-8 as well. See the PIE site for more details.
http://css3pie.com/about/
精彩评论