有没有一种方法可以为背景图像制作一个有角度的mdb转盘

Question

有没有办法为背景图像制作一个有角度的mdb转盘？我希望转盘只更改背景图像，并为每个转盘项目提供相同的内容，但如果有意义的话，不必将该内容(html文本(放在每个转盘项目中。我不想把内容放在每个转盘项目中，因为我会在每个转盘中有3个相同html代码的副本。

我希望它看起来像上面的那个：https://mdbootstrap.com/snippets/jquery/mdbootstrap/50462?action=fullscreen除了我只想更改内容的一个实例(html文本(和背景图像转盘项目。

<mdb-carousel class="carousel slide carousel-fade" [animation]="'fade'">
<mdb-carousel-item>
<div class="view w-100">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
<div class="mask rgba-black-light waves-light" mdbWavesEffect></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Same Content</h3>
</div>
</mdb-carousel-item>
<mdb-carousel-item>
<div class="view w-100">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
<div class="mask rgba-black-strong waves-light" mdbWavesEffect></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Same Content</h3>
</div>
</mdb-carousel-item>
<mdb-carousel-item>
<div class="view w-100">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
<div class="mask rgba-black-slight waves-light" mdbWavesEffect></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Same Content</h3>
</div>
</mdb-carousel-item>
</mdb-carousel>

Answer 1

试试我的代码：

<mdb-carousel class="carousel slide carousel-fade" [animation]="'fade'">
<mdb-carousel-item>
<div class="view w-100">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
<div class="mask rgba-black-light waves-light" mdbWavesEffect></div>
</div>
</mdb-carousel-item>
<mdb-carousel-item>
<div class="view w-100">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
<div class="mask rgba-black-strong waves-light" mdbWavesEffect></div>
</div>
</mdb-carousel-item>
<mdb-carousel-item>
<div class="view w-100">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
<div class="mask rgba-black-slight waves-light" mdbWavesEffect></div>
</div>
</mdb-carousel-item>
<div class="carousel-caption">
<h3 class="h3-responsive">One content for three backgrounds</h3>
</div>
</mdb-carousel>

我将旋转木马标题直接移到了mdb-carousel元素上，这似乎实现了您的愿望。