4
我试图创建,当你将鼠标悬停在链接之一的菜单,它显示在背景切片图像。我能够使用CSS3剪切蒙版创建仅适用于Chrome的内容。剪贴蒙版为SVG
产生这些形状规模与浏览器宽度(+1百分比!)和除两件事情做工精良的代码:一个是该面罩不夹我需要的形状(参见看到形状的彩色图像),并且它不适用于Firefox和IE。
#music_hover {
z-index: 5;
width: 100%;
height: 100%;
background: red;
-webkit-clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 70% 100%);
clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 70% 100%);
float: right;
position: absolute;
background: url(../music.jpg) bottom right no-repeat;
display: none;
}
现在,为了找到支持更多浏览器的东西,我已经切换到SVG图像。我已在[CodePen]中完成此操作。我当前的解决方案的问题是,当浏览器不是1920x1080时,切片不会“保持在一起”。第一排的三个切片粘在上面,而第二排粘到最下面,在页面中间创建一个白色条。切片也不会缩放,因为它们具有精确的点来绘制形状(而不是剪切蒙版的百分比)。
HTML:
<svg version="1.1" id="novel_Position" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 773.685 540.94">
<defs>
<pattern id="novel_BG" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="http://loiseau-noir.com/seb/novel.jpg" x="0" y="0" width="100%" height="100%" />
</pattern>
</defs>
<path d="M420,1.058H0v539.569l696.512,0.313c0.031-72.714,29.516-138.541,77.173-186.197L420,1.058z" fill="red"/>
</svg>
CSS:
#novel_Position {
z-index: 5;
width: 40.5%;
top: 0;
left: 0;
position: fixed;
}
现在,如果所有的不明确,页面应有的功能是这样的:
我还以为你会更好创造这个作为一个单一的SVG图像,而不是试图缝合在一起的多个SVG片段。 –
这是一个很好的问题!任何更新? –