跨浏览器剪贴蒙版
Posted
技术标签:
【中文标题】跨浏览器剪贴蒙版【英文标题】：Cross-browser clipping masks 【发布时间】：2011-06-27 20:22:42 【问题描述】：我的网站有导航，显示为矩形按钮列表圆角。
每个按钮都应该有自己的自定义背景，即一张照片。照片比按钮大，应该随着鼠标在此按钮上的移动而移动。我们有一种效果，就像我们在透过窗户看一样。
导航具有以下 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;
什么是跨浏览器的方法？
【问题讨论】：
仅供参考，仅基于 Webkit 的浏览器支持图像屏蔽。 （我最近也遇到了跨浏览器图像屏蔽的问题）。 我会坚持 W3C，特别是因为所有浏览器都在推动符合 HTML5 标准（以及 CSS3 / javascript）。 (dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html) 【参考方案1】：我发现最好的方法是使用溢出：隐藏。
“div/li”按钮内的任何内容都将被裁剪为按钮尺寸。适用于圆角。
例如（div 示例）（黄色框为 400 x 400 图像，红色框为 200 x 200 ..example = chrome/-webkit-）
<html>
<style>
.boxwidth:200px; height:200px; background:red;overflow:hidden;border-radius:30px;
.image width:400px; height:400px; background:yellow;
您可以给每个li div 一个宽度和一个高度，然后使用CSS background 应用以background-position 定位的图像，然后将其用于圆角：
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 */并包含此 HTC 文件以支持 IE：
http://code.google.com/p/curved-corner/
【讨论】：
以上是关于跨浏览器剪贴蒙版的主要内容，如果未能解决你的问题，请参考以下文章