Html 我的形象'；的剪辑路径在Firefox中不起作用_Html_Css_Firefox_Svg

Html 我的形象'；的剪辑路径在Firefox中不起作用

html css firefox svg

Html 我的形象'；的剪辑路径在Firefox中不起作用,html,css,firefox,svg,Html,Css,Firefox,Svg,我尝试使用两个图像，使用剪切路径（div id=“umn”）将一个图像斜切成两半，并将其放置在第一个图像上（作为body标签上的背景图像应用） HTML: 你可以在这里看到它：这在Chrome中非常有效，但问题是这些剪辑路径在Firefox中似乎不起作用。在Firefox中，用户只看到100%高度和宽度的#unm div，没有应用剪辑路径有人建议使用SVG来创建剪辑路径，但我不能这样做。我无法理解点坐标的概念，不管怎样，chrome和Firefox似乎仍然存在差异。我尝试了以下HTML：

我尝试使用两个图像，使用剪切路径（div id=“umn”）将一个图像斜切成两半，并将其放置在第一个图像上（作为body标签上的背景图像应用）

HTML:

你可以在这里看到它：

这在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>

您可以看到，这一尝试甚至还没有结束，在这里：

（是的，我知道图像很大，即将缩小）

如何在主流浏览器中实现这一点并保持响应能力？

如果你能帮忙，我将不胜感激。谢谢

你应该在你的问题中提供你的代码片段-将来你的链接（以及与之相关的代码）将发生变化，你的问题对未来的观众来说将是无用的。a）在问题中提供答案，而不是网站。b）如果你指的是CSS剪辑，它仍在开发中。SVG剪辑是可用的。c） id为=“clipping”的元素应该剪切什么？我不知道这如何无法满足MCV请求。页面上有三个元素，如果有妨碍，我将注释掉无关的元素。在Firefox中查看时，无法不看到问题。对于您的问题c），您可以看到，如上面的示例所示，#clipping元素用作#unm上的剪辑路径。id=“clipping”的元素是否与clip path:url（“剪辑”）在同一文件中；如果不行，那就不行了。

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%);}

<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>

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