Как предоставить собственное изображение в SVG для фона?

Question

Я создаю приложение реагирования, и есть часть, где мне нужно сделать наклонный div, который также имеет фоновое изображение.

форма похожа на синий div, показанный здесь - наклонная форма div Теперь я мог бы сделать, как показано на изображении, с которым я связан, но, поскольку есть фоновое изображение, я не могу использовать его, так как мне пришлось бы использовать его за 2 деления.

так,Я хочу использовать SVG для создания фигуры вместе с фоном, а затем другие вещи, такие как текст в этом div.Итак, что я должен сделать, чтобы это произошло.

вот что я пытался, но я не могу одновременно показать фоновое изображение и наклон.просто хотел добавить, что этот SVG находится внутри сетки, как это.это материальная сетка для макета.Я хочу, чтобы это изображение заняло все пространство этой сетки в качестве фонового изображения.и я бы написал текст на этой сетке, как обычно.

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

, но он не работает.фоновое изображение вообще не отображается.

Итак, есть идеи, как сделать эту работу ??

Answer 1

Вы не можете добавить фон к 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>