跨浏览器剪贴蒙版答案

【问题标题】：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)

标签： cross-browser css mask image-clipping

【解决方案1】：

我发现最好的方法是使用溢出：隐藏。

“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;}

图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片

【解决方案2】：

您可以给每个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/

【讨论】：