Блог

Главная - Вопросы по программированию - как поместить в div 2 изображения в фоновом режиме css-изображение: url(…..)

как поместить в div 2 изображения в фоновом режиме css-изображение: url(…..)

#html #css

#HTML #css

Вопрос:

Как я могу поместить в один и тот же div в фоновом режиме два изображения с помощью css?

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

Комментарии:

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

2. @ale917k на самом деле он может добавить 2 фона в один div с background: url('image.png') 0 0 no-repeat, url('image2.png') 100% 0 без повторов;

3. У вас может быть несколько фоновых изображений на элементе, используя background-image: url (img1), url (img2), т. Е. URL-адреса, разделенные запятыми, но я не совсем понимаю, хотите ли вы этого. Не могли бы вы рассказать немного подробнее?

4. Ах, это было ново для меня, спасибо за разъяснение!

Ответ №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>

Комментарии:

1. Да, но изображения должны располагаться так, чтобы избежать наложения и, возможно, иметь непрозрачность.