在 html css 中实现不规则矩形图像遮罩

Question

是否可以在HTML5和CSS3中实现这样的效果，请看附图

这里我有两个 div 和 overflow:hidden，每个里面都有一张图片。当我悬停每个图像时，图像会在同一个 div 容器内放大或上下移动。所以基本上 div 就像大图像的遮罩。

我在这里没能实现的是 div 的形状来掩盖图像。有没有办法实现这一点，并且可以在几乎所有浏览器的最新版本中工作？

感谢您的帮助！

Answer 1

对于类似的事情，我建议两种不同的可能性：

使用 CSS 转换（特别是 skewY）；或
使用 SVG（只有一些 polygons）

他们每个人都有一些 good/bad 的东西，并且可以在所有现代浏览器和移动设备上运行，正如您在 transform and SVG.[=25 的 caniuse.com 网站上看到的那样=]

使用 CSS 二维变换

您将有一个垂直倾斜的容器 div，然后在其内部其他 div 倾斜（过度）校正。然后隐藏溢出，因此不显示包含的 divs 的多余部分。

您可以在此处（或在此 JSFiddle 上）看到演示：

#skewed {
    position:relative;
    margin-top:20px;
 width: 500px;
 height: 300px;
    transform: skewY(-2deg);
 -webkit-transform: skewY(-2deg);
 -moz-transform: skewY(-2deg);
 -o-transform: skewY(-2deg);
    overflow:hidden;
    background:black;
    -webkit-backface-visibility: hidden;
}

#skewed div {
    position:absolute;
    height:200px;
    width:500px;
    transform: skewY(4deg);
    -webkit-transform: skewY(4deg);
 -moz-transform: skewY(4deg);
 -o-transform: skewY(4deg);
    overflow:hidden;
    opacity:0.4;
    transition:all 0.5s;
    z-index:1;
    background-size:100% 100%;
    -webkit-backface-visibility: hidden;
}

#skewed div:hover {
    opacity:1;
    z-index:2;
    background-size:110% 110%;
}

#top {
    top:-50px;
    left:0;
    background:url(http://lorempixel.com/1000/400/animals) no-repeat center center;
}

#bottom {
    top:150px;
    left:0;
    background:url(http://lorempixel.com/1000/400/people) no-repeat center center;
}

<div id="skewed">
    <div id="top"></div>
    <div id="bottom"></div>
</div>

关于此解决方案：

所有主要浏览器（Opera Mini 除外）均支持，但您需要使用前缀。
易于实施和扩展更多内容（文本、链接等）
在Chrome中，边缘看起来太尖锐了。虽然这可以使用 -webkit-backface-visibility: hidden as suggested by Neven in this answer.

使用 SVG

使用 polygons 定义您要创建的基本形状。

我不是 SVG 专家，所以我不能做任何花哨的事情，但这是为了获得一个大概的想法。这是一个简单的演示（你也可以在这个JSFiddle上看到它）：

polygon {
    opacity:0.4;
    transition:all 0.5s;
}

polygon:hover {
    opacity:1;
}

<svg width="500" height="300" viewBox="0 0 500 300">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="300">
            <image xlink:href="http://lorempixel.com/600/300/animals" x="0" y="0" width="600" height="300" />
        </pattern>
        <pattern id="img2" patternUnits="userSpaceOnUse" width="600" height="300">
            <image xlink:href="http://lorempixel.com/600/300/people" x="0" y="0" width="600" height="300" />
        </pattern>
    </defs>
    <polygon id="top" points="0,20 500,0 500,170 0,130" fill="url(#img1)" />
    <polygon id="bottom" points="0,130 500,170 500,280 0,300" fill="url(#img2)" />
</svg>

关于此解决方案：

所有主要浏览器都支持（不需要前缀或任何东西）
高度可定制：我使用多边形，但您可以使用路径和曲线来提供更个性化的解决方案。
SVG 不像其他解决方案那么简单（好吧，像这样简单的东西很容易，但更复杂的东西需要一些学习）。

在 html css 中实现不规则矩形图像遮罩

Achieve irregular rectangular shape image masking in html css

html

image

css

masking