开发者

circular images?

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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜