跨浏览器剪切蒙版

Question

跨浏览器剪切蒙版

Ant*_*nAL 3 css mask cross-browser css3 image-clipping

我的网站有导航,显示为带圆角的rectengular按钮列表.

每个按钮都应该有自己的自定义背景,这是一张照片.照片比按钮大,应该响应鼠标在此按钮上的移动而移动.我们有一种效果,就像我们透过窗户看一样.

导航具有以下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;

Run Code Online (Sandbox Code Playgroud)

什么是跨浏览器的方式呢？

Answer 1

Und*_*ned 6

我发现最好的方法是使用overflow:hidden.

"div/li"按钮内的任何内容都将被剪裁到按钮尺寸.适用于圆角.

例如(div示例)(黄色框是400 x 400图像,红色框是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>

 <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>

(对不起......我是新的...我以为他们有一些转换符号的方法,我的坏)

归档时间：	14 年，8 月前
查看次数：	8349 次
最近记录：	14 年，8 月前