所以我一直在尝试将背景图像剪辑为圆 Angular 六边形形状,并且我发现 webkit 令人惊叹的 mask 图像可以非常轻松地解决我的所有问题。遗憾的是,它仅适用于 Chrome 和 Safari(当然)。
如何为非 webkit 浏览器构建 SVG 掩码的后备?是否可以使用图像文件夹中的 .svg 文件作为蒙版,或者是否必须在 html 文档中的 svg 标记内定义它?
这是我想要的 JSFiddle: http://jsfiddle.net/fbB3P/
CSS:
.hexagon {
position: relative;
display: inline-block;
width: 205px;
height: 233px;
overflow: hidden;
color: #fff;
-webkit-mask-image: url('http://i40.tinypic.com/kajqg.jpg');
text-align: center;
}
.hexagon .content {
height: 186px;
width: 186px;
margin: auto;
margin-top: 16px;
}
.hexagon a {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}
HTML:
<div class="hexagon" style="background: url('https://s3.amazonaws.com/images.dailydabbles.com/artwork/skull-link5243b4c783a87-crop-260x260-medium.png');">
<a href="#skullkid">
<div class="content"></div>
</a>
</div>
最佳答案
太糟糕了,屏蔽有awful support .
我利用 :before
和 :after
伪元素创建了另一种屏蔽方式。
jsFiddle demo here - 更好的跨浏览器支持。
HTML
<div class="hex"></div>
CSS
.hex {
width: 205px;
height: 233px;
position: relative;
background: url('https://s3.amazonaws.com/images.dailydabbles.com/artwork/skull-link5243b4c783a87-crop-260x260-medium.png');
}
.hex:before {
content: "";
width: 0;
height: 0;
border-bottom: 60px solid transparent;
border-left: 103px solid white;
border-right: 102px solid white;
position: absolute;
}
.hex:after {
content: "";
width: 0;
position: absolute;
bottom: 0px;
border-top: 60px solid transparent;
border-left: 103px solid white;
border-right: 102px solid white;
}
关于CSS:使用 Mask 作为 Webkit-Mask-Image 的后备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19201882/