css – 跨浏览器剪切蒙版

来源：互联网收集：自由互联发布时间：2021-06-13

我的网站有导航,显示为带圆角的rectengular按钮列表. 每个按钮都应该有自己的自定义背景,这是一张照片.照片比按钮大,应该响应鼠标在此按钮上的移动而移动.我们有一种效果,就像我们透

我的网站有导航,显示为带圆角的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;

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

我发现最好的方法是使用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;}

< /风格>

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

< / DIV>
< / HTML>

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

上一篇：CSS中有任何敏锐的风格吗？
下一篇：css – 有没有办法获取传递给Sass mixin的参数数组？

css – 跨浏览器剪切蒙版

相关文章