时间戳

首页 > 解决方案 > 如何将自己的图像提供给 svg 作为背景？

css - 如何将自己的图像提供给 svg 作为背景？

问题描述

我正在构建一个反应应用程序，并且有一部分我需要制作一个也有背景图像的倾斜 div。

形状就像这里显示的蓝色 div -倾斜的 div 形状 现在，我可以按照我链接到的图像中所示的那样做，但是由于有背景图像，我无法使用它，因为我必须在 2 中使用它分区。

所以，我想使用 svg 来创建形状以及背景，然后在该 div 中添加其他内容，例如文本。那么，我应该怎么做才能做到这一点。

这是我正在尝试的，但我无法同时显示背景图像和倾斜。只是想补充一点，这个 svg 在这样的网格内。这是一个用于布局的材质 ui 网格。我希望这张图片将这个网格的整个空间作为背景图片。我会像往常一样在这个网格上写文字。

     <Grid container > 

<Grid item xs={12} sm={12} md={12} lg={12} className='mscbackground' > 

<h2> asfasfdasdfasfdasfd <span className='blueword'> ASDFASDFASDF</span> </h2> 
JLSAKSJFDKLAJSLKDFJALKSJFDKLAJSLKFDJALKSJFDLKJLKSDJFLKJALKSDJFLKAJSDLKFJALKSJDFKLAJSLDKFJaksjdflkajsldfkjalkdfjslakjdslkfjalksdjflkasjdfkljalskdjflkasjdflkjalksdjflkasjdlkjflkasdjflkajsdlkfjalksdjflkasjdlfkj 


</Grid> 



</Grid>

在我用过的css中

.mscbackground {
    height: 450px;
    padding-top: 50px;
    padding-left: 50px;
    line-height: 2.5;
    text-align: center;
    color: #D9D9D9;  
    width:100%;
    background:
     linear-gradient(to bottom right,transparent 49%,#fff 50%) bottom/100% 7% no-repeat,
     url('./assets/black-and-white-music-headphones-life.jpg')center/cover no-repeat;
  }

但它不起作用。背景图像根本没有显示。

那么，任何想法如何使这项工作？

标签： cssreactjssvg

解决方案

您不能将背景添加到path. 使用 SVG，您可以考虑如下所示的剪辑路径：

svg {
  width:200px;
}
<svg viewbox="0 0 300 200">
  <defs>
    <clipPath id="circle"> 
       <polygon points="0,0 300,0 300,100 0,200" fill="white" />
    </clipPath>
  </defs>
<image width="300" height="200" xlink:href="https://picsum.photos/300/200?image=0" clip-path="url(#circle)"/>
</svg>

如果您不需要透明度，这里有一个简单的 CSS 解决方案：

.box {
  height:200px;
  width:300px;
  background:
   linear-gradient(to bottom right,transparent 49%,#fff 50%) bottom/100% 40% no-repeat,
   url(https://picsum.photos/300/200?image=0) center/cover no-repeat;
}
<div class="box">

</div>

推荐阅读