Question

我试图使用两个图像，使用剪切路径将对角线切成两半（div id =＆＃34; umn＆＃34;）并将其放在第一张图像上（作为身体标签上的背景图像应用））。

HTML：

<body>
   <div id="umn">&nbsp;</div>
</body>

CSS：

body{background:url(../images/unl.jpg)no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
 #umn{width:100%;height:100%;background:url(../images/umn.jpg)no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
-webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);}

你可以在这里看到它： http://wheresthechair.com/

这在Chrome中运行良好，但问题是这些剪切路径似乎不适用于Firefox。在Firefox中，用户只看到100％高度和宽度的#unm div，而没有应用剪切路径。

有人建议使用SVG创建剪切路径，但我无法这样做。我无法掌握点坐标的概念，无论如何，Chrome和Firefox似乎仍然存在差异。我尝试了以下HTML：

<body>
    <div id="umn"><img src="assets/images/umn.jpg" /></div>
       <svg width='0' height='0'>
         <defs>
            <clipPath id="clipping" clipPathUnits="objectBoundingBox">
               <polygon points="0 0, 3 0, 1 1, 1 1" />
            </clipPath>
         </defs>
       </svg>
</body>

与以下CSS配对：

body{background:url(../images/unl.jpg)no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
 #umn{
  -webkit-clip-path: url("#clipping");
  clip-path: url("#clipping");
position: fixed;
  width: 100%;}
  #unm img{width: 100%;height: auto;}

您可以在此处看到此尝试甚至不接近：http://wheresthechair.com/svg/index.html

（是的，我知道图像很大，会缩小尺寸）

如何在主流浏览器中使用此功能并保持响应能力？会感激一些帮助。谢谢！

我的图片裁剪路径无法在Firefox

0 个答案: