如何在 css background-image: url(...) 中放入 div 2 图片

Question

如何使用 css 将两个图像放在背景中的同一个 div 中？

<div class="testimonial carousel-item active">
<img class="img-testimonial" src="assets/image-tanya.jpg" alt="">
<div class="text-testimonial">
<p>"I've been interested in coding for a while but never taken the jump, until now. I couldn't recommend this course enough. I'm now in the job of my dreams and so excited about the future."</p>
<p class="small">Tanya Sinclair <span class="grey">UX Engineer</span></p>
</div>
</div>

在 .testimonial 我在后台有一个 svg 图像

.testimonial {
    background-image: url(../pattern-bg.svg);
    background-repeat: no-repeat;
    background-position: right top;
    width: 1000px;
    height: 800px;
    position: relative;
    display: inline-block;
}

   

Answer 1

CSS 多背景

CSS 允许您通过 background-image 属性为一个元素添加多个背景图像。

不同的背景图像用逗号分隔，图像彼此堆叠在一起，其中第一张图像最接近观看者。

 div{ background-image: url("https://whyy.org/wp-content/uploads/2017/07/LOGO_First_overwhite-1-copy-1024x444.png"), url("https://cdn.iconscout.com/icon/premium/png-256-thumb/2nd-place-594924.png"); background-repeat: no-repeat; background-position: left top; width: 1000px; height: 800px; position: relative; display: inline-block; }

 <div></div>