时间戳

首页 > 解决方案 > 如何在css背景图像中放入一个div 2图像：url（.....）

html - 如何在css背景图像中放入一个div 2图像：url（.....）

问题描述

如何在背景中使用 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;
}

标签： htmlcss

解决方案

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>

推荐阅读