跨浏览器剪贴蒙版 [英] Cross-browser clipping masks
问题描述
我的网站具有导航功能，显示为带有圆角的矩形按钮列表 .
每个按钮应具有自己的自定义背景，即照片.照片大于按钮，应响应鼠标在该按钮上的移动而移动.我们有一种效果，就像我们透过窗户看一样.
导航具有以下HTML结构:"ul> li> a> img".
我认为，每个"ul> li"应该是一个带有圆角的矩形，并用作图像的剪贴蒙版.
设置溢出:隐藏；"无效，因为剪切区域是没有圆角的简单矩形.
CSS属性(如下所示)可以在Webkit浏览器下工作，但不能在Firefox下工作.
mask-image: url(/images/mask.png);
mask-position: 0 0;
mask-repeat: no-repeat no-repeat;
mask-size: 125pt 77pt;
什么是跨浏览器的方式?
我发现做到这一点的最佳方法是使用overflow:hidden.
"div/li"按钮中的所有内容都会被裁剪为按钮尺寸.在圆角上效果很好.
例如(div示例)(黄色框为400 x 400图像，红色框为200 x 200 ..example = chrome/-webkit-)
(对不起...我是新来的...我以为他们有某种转换符号的方法，我很糟糕)
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 acting 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)
这篇关于跨浏览器剪贴蒙版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
