我试图在顶部的角度得到的图像,并且图像必须通过CMS更新。我发现大多数跨浏览器兼容的方式是使用SVG,创建路径,并给予它的模式。我现在所拥有的代码是:
<svg class="workIntroImage" width="696px" height="921px" viewBox="0 0 696 921">
<defs>
<pattern id="workIntroImg" width="1920" x="0" y="0" height="1080" patternUnits="userSpaceOnUse">
<image xlink:href="https://www.usmagazine.com/wp-content/uploads/2017/12/147234372_the-office-zoom.jpg" x="0" y="0" width="1920" height"1080"></image>
</pattern>
</defs>
<g x="0" y="0" transform="translate(-37.000000, 0.000000)">
<path x="0" y="0" d="M0,0 L725.886225,151.670321 C729.593802,152.445001 732.25,155.713561 732.25,159.501206 L732.25,928 L0,928 L0,0 Z" fill="url(#workIntroImg)"></path>
</g>
</svg>
但它只能在浏览器 - 只是显示了在Firefox,Safari和边缘为空白。任何见解,或将在所有现代浏览器的工作替代解决方案,将不胜感激!
这可能只是一个错字 - 有一个=
在<image ... height"1080">
失踪。 Chrome是擅长解析无效的标记,其他的浏览器并不总是那么多。
<svg class="workIntroImage" width="696px" height="921px" viewBox="0 0 696 921">
<defs>
<pattern id="workIntroImg" width="1920" x="0" y="0" height="1080" patternUnits="userSpaceOnUse">
<image xlink:href="https://www.usmagazine.com/wp-content/uploads/2017/12/147234372_the-office-zoom.jpg" x="0" y="0" width="1920" height="1080"></image>
</pattern>
</defs>
<g x="0" y="0" transform="translate(-37.000000, 0.000000)">
<path x="0" y="0" d="M0,0 L725.886225,151.670321 C729.593802,152.445001 732.25,155.713561 732.25,159.501206 L732.25,928 L0,928 L0,0 Z" fill="url(#workIntroImg)"></path>
</g>
</svg>