SVG 图案图像的行为类似于“背景尺寸：封面”答案

【问题标题】：SVG Patterned Image to behave like "background-size:cover"SVG 图案图像的行为类似于“背景尺寸：封面”
【发布时间】：2020-12-18 22:07:00
【问题描述】：

我正在寻找一种方法来制作背景图像，使用模式设置，当设置为 cover 时，其行为类似于常规 css 属性 background-size。下面的笔显示主图像拉伸以适应容器，这导致图像失真。我想复制“背景图像：封面”的工作原理，但适用于 SVG 模式。下面的部分让您对将使用它的上下文有所了解。有没有办法做到这一点？有没有更好的方法来标记它？

<div style="width:100%;height:600px">
 <svg width="100%" height="600px" viewBox="0 0 100 100" preserveAspectRatio="none" fill="transparent">
   <defs>
    <pattern id="bg" patternUnits="userSpaceOnUse" width="100" height="100" x="0" y="0">
      <image href="https://picsum.photos/1000/1000?grayscale" x="0" y="0" width="100" height="100" preserveAspectRatio="none"></image>
    </pattern>
   </defs>
   <clipPath id="myClip">
    <polygon points="0,0, 0,100, 100,80, 100, 0"></polygon>
   </clipPath>
   <polygon id="poly" points="0,0 0,100, 100,100, 100, 0" mask="url(#myClip)"></polygon>
   <use clip-path="url(#myClip)" xlink:href="#poly" fill="url(#bg)"></use>
  </svg>
</div>

<div style="background-color:lightblue;height:600px;padding:30px;margin-top:-150px">
  <div style="float:left;width:50%;padding:50px;padding-top:150px;box-sizing:border-box">
    <h1>Lorem Ipsum</h1>
    <p>Ut nec arcu porta, vestibulum lorem et, ullamcorper nulla. Nam quis mollis odio. Aliquam neque nibh, imperdiet eu ante ut, tincidunt egestas elit. Duis nulla nulla, malesuada vel gravida id, aliquam ac odio. Sed id ex viverra, cursus velit id, iaculis nibh. Ut non porta augue, at sodales felis. Nunc lobortis euismod diam ut fringilla. Quisque molestie, nisl nec malesuada accumsan, massa tortor laoreet tellus, vitae bibendum nulla nisl non metus. Morbi congue felis sed felis semper molestie. Mauris quis lectus aliquam, suscipit felis ut, luctus dui. Etiam aliquam at ipsum at tempor. Integer hendrerit, purus vel tristique aliquam, ipsum orci ultrices felis, a suscipit ligula velit nec sem. Ut at laoreet nulla, at faucibus nulla.</p>
  </div>
  
  <div style="float:right;height:100%;width:50%;background-image:url(https://picsum.photos/1000/1000?grayscale)">
  </div>
</div>

为了额外加分，是否可以将其设为固定背景（即like background-attachment:fixed）

【问题讨论】：

将您的 SVG 作为背景，不要使用 width 或 height 并使用 background-size:cover。在此处查看文档：developer.mozilla.org/en-US/docs/Web/CSS/…
你能提供一个可行的例子吗？不确定应该将 bg 应用于哪个元素。我在这里遇到的问题是我需要剪辑背景，以便后面的元素可见。
jsfiddle.net/btuwmasd 并且您可以使用clip 属性剪辑您的 div：developer.mozilla.org/en-US/docs/Web/CSS/clip
附带说明，您应该尝试将 CSS 与 HTML 分开。内联 CSS 不可扩展，维护起来很麻烦。
感谢您的提琴，但您的示例没有使用剪辑 - 只是用作背景的 svg，这不是这里的问题。如果我想使用图像作为背景并剪辑它而不是颜色，我仍然会遇到同样的问题。我没有在我的 HTML 中明确定义 SVG，而是将它放在了 background 属性中。

标签： html css svg

【解决方案1】：

您似乎使可以使用剪辑路径完成的简单任务过于复杂

.header {
  height:400px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 150px),0 100%); /* update the calc(100% - 150px) to control the curve */
  background:url(https://picsum.photos/1000/1000?grayscale) center/cover fixed;
}

<div  class="header"></div>
<div style="background-color:lightblue;height:600px;padding:30px;margin-top:-150px">
  <div style="float:left;width:50%;padding:50px;padding-top:150px;box-sizing:border-box">
    <h1>Lorem Ipsum</h1>
    <p>Ut nec arcu porta, vestibulum lorem et, ullamcorper nulla. Nam quis mollis odio. Aliquam neque nibh, imperdiet eu ante ut, tincidunt egestas elit. Duis nulla nulla, malesuada vel gravida id, aliquam ac odio. Sed id ex viverra, cursus velit id, iaculis nibh. Ut non porta augue, at sodales felis. Nunc lobortis euismod diam ut fringilla. Quisque molestie, nisl nec malesuada accumsan, massa tortor laoreet tellus, vitae bibendum nulla nisl non metus. Morbi congue felis sed felis semper molestie. Mauris quis lectus aliquam, suscipit felis ut, luctus dui. Etiam aliquam at ipsum at tempor. Integer hendrerit, purus vel tristique aliquam, ipsum orci ultrices felis, a suscipit ligula velit nec sem. Ut at laoreet nulla, at faucibus nulla.</p>
  </div>
  
  <div style="float:right;height:100%;width:50%;background-image:url(https://picsum.photos/1000/1000?grayscale)">
  </div>
</div>

【讨论】：

太棒了。我完全想多了。非常感谢。