Question

我有下一个svg：

<svg 
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="483px" height="255px">
   <path fill-rule="evenodd"  fill="rgb(0, 0, 0)"
   d="M-0.000,-0.001 L483.001,1.873 L266.099,254.997 L-0.000,254.997 L-0.000,-0.001 Z"/>
</svg>

https://i.stack.imgur.com/1pdB7.png

如何插入具有位置中心和不重复属性的全背景图像？像本例一样：

https://i.stack.imgur.com/tUqbr.png

我非常感谢您的回答，谢谢！

Answer 1

尽管您可以探索从SVG内渲染图像，但是有一种更简单的解决方案来实现相同的效果。

最好采用这种方法：

作为<img>元素或background-image的{{1}}定期渲染图像。在容器中随意放置并设置样式。
在图像顶部的侧面上定位一个与页面（或父元素）背景匹配的形状。这种形状可能是<div>，特别是如果您需要曲线和复杂的边缘形状，但是您可以根据需要将彩色<svg>旋转5度来完成。性能更高。

通过这种方式，可以正常管理和加载映像，而不会将其困在SVG内部。可以对元素和图像进行 actual 遮罩/剪切，但是您必须为浏览器的错误和兼容性问题而苦恼。

Codepen

<div>

.container { 
  width: 600px;
  height: 200px;
  overflow: hidden;
  position: relative;
  background-color: #000000;
  margin-bottom: 2em;
  color: #ffffff;
}

.container_inner {
  padding: 2em;
}

#side-shape {
    height: 400%;
    background-color: #ffffff;
    position: absolute;
    width: 200px;
    right: -10%;
    top: -200%;
    z-index: 1;
    transform: rotate(5deg); 
}


#side-shape2 {
  fill: #ffffff;
    height: 100%;
    position: absolute;
    width: 200px;
    right: 0%;
    top: 0%;
    z-index: 1;
}

Answer 2

您可以使用图案填充背景图像。

<svg 
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="483px" height="255px">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="450">
            <image xlink:href="download.jpg" x="0" y="0"
                width="600" height="450" />
        </pattern>
    </defs>
    <path d="M-0.000,-0.001 L483.001,1.873 L266.099,254.997 L-0.000,254.997 L-0.000,-0.001 Z"
          fill="url(#img1)" />

</svg>

Answer 3

您可以使用以下路径作为剪切路径：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="483px" height="255px">
 <defs>   
  <clipPath id="theClippingPath" > 
  <path 
   d="M-0.000,-0.001 L483.001,1.873 L266.099,254.997 L-0.000,254.997 L-0.000,-0.001 Z"/>
 </clipPath> 
  </defs> 
  <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="485" width="485" clip-path="url(#theClippingPath)"></image>
</svg>

Answer 4

这是仅CSS的解决方案：

.box {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.box span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform-origin: top left;
  transform: skewX(-20deg);
  overflow: hidden;
}

.box span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform-origin: top left;
  transform: skewX(20deg);
  background: url(https://picsum.photos/800/600?image=0) center/cover;
}


body {
 background:pink;
}

<div class="box">
  <span></span>
</div>

如果您不需要透明度，则可以使用更少的代码

.box {
  width: 400px;
  height: 200px;
  position: relative;
  background:
    linear-gradient(to bottom right,transparent 49.8%,pink 50%) right/20% 100% no-repeat,
    url(https://picsum.photos/800/600?image=0) center/cover;
}
body {
 background:pink;
}

<div class="box">
</div>

使用clip-path

的另一种方法

.box {
  width: 400px;
  height: 200px;
  position: relative;
  background:url(https://picsum.photos/800/600?image=0) center/cover;
  -webkit-clip-path:polygon(0 0,0 100%, 80% 100%, 100% 0);
  clip-path:polygon(0 0,0 100%, 80% 100%, 100% 0);
}
body {
 background:pink;
}

<div class="box">
</div>

用完整的背景图片填充svg路径

4 个答案: