Cross-browser clipping masks_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-10 10:55 出处：网络

My web site has navigation, presented as a list of rectengular buttons with round corners. Each button should have it\'s own custom background, which is a photo. Photo is bigger than button and shoul

My web site has navigation, presented as a list of rectengular buttons with round corners.

Each button should have it's own custom background, which is a photo. Photo is bigger than button and should move in response to mouse movement over this button. We have an effect, like we are looking through the window.

Navigation has following HTML structure: "ul > li > a > img".

I think, each "ul > li" should be a rectangle with round corner and actin开发者_运维技巧g as clipping mask for image.

Setting "overflow: hidden;" does't works, because clipping area is simple rectangle without round corners.

CSS properties, like below, does working under Webkit-browsers, but not Firefox.

mask-image: url(/images/mask.png);
mask-position: 0 0;
mask-repeat: no-repeat no-repeat;
mask-size: 125pt 77pt;

What is a cross-browser way to do it ?

I find the best way to do this is to use overflow:hidden.

Anything inside your "div/li" buttons will be clipped to the buttons dimensions. Works well on round corners.

e.g. (div example)( the yellow box is a 400 x 400 image, the red box is 200 x 200 ..example = chrome/-webkit-)

 <html>

<style>
.box{width:200px; height:200px; background:red;overflow:hidden;border-radius:30px;}
.image {width:400px; height:400px; background:yellow;}

</style>

<div class="box">
<div class="image">
Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image 
</div>

</div>
</html>

(Sorry...I'm new...I assumed they had some method of converting symbols, my bad)

You could give each li div a width and a height then use the CSS background to apply the image positioned with background-position and then use this for rounded corners:

behavior: url("border-radius.htc");
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari and Chrome */
-khtml-border-radius: 20px; /* Linux browsers */
border-radius: 20px; /* Opera 10.50, IE and CSS3 */

And include this HTC file for IE support:

http://code.google.com/p/curved-corner/