View Full Version : CSS image mask?
09-24-2004, 04:47 PM
Can I do this with CSS: I want to display only a portion of an image, in effect to mask the rest of the image. For instance, if I have an image 1200px by 1600px, I want to show only a slice of it, say 450px by 100px. I can imagine how, if a "window" can be created, it could be located by coordinates within the larger image itself. But I can't figure out whether and how this "peek" of something larger might be done.
Thanks for any suggestions.
09-24-2004, 05:00 PM
clip is what you want - http://www.w3schools.com/css/pr_pos_clip.asp
Note that the criteria for clip have changed between CSS2 and 2.1 - an element must now be absolutely positioned to have clip, and clip can be applied to elements with hidden overflow.
09-24-2004, 05:29 PM
Yes! Thanks a million. This does the trick.
Once again this forum comes through. What a pleasure to find such helpful people.
09-24-2004, 09:00 PM
May I come back for one more bite at the cherry?
I've got the image to do what I want, using overflow:hidden on the containing paragraph. And I've got a fancy effect I'm playing with, where I have an offset border, using a relatively positioned, empty paragraph with a border. (see screenshot (http://www.fodden.com/screenshot.gif) ) But I've got a stubborn gap between the two prior paragraph elements and the next paragraph, which would be a normal text paragraph. I think the problem is that when I displaced the fancy effect border paragraph by 90px (to overlap it on the image) it left a 90 px space. How do I get the flow to resume without the gap?
My html is:
<p class="imagep"><img src="/images/7numbersmenu.jpg"></p>
<p class="imagepx"></p><p>this is now a test</p>
My immediately relevant CSS is:
border:thin solid gray;
Powered by vBulletin® Version 4.2.2 Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.