0

На месте каждого красного квадрата должно быть фото. Как вставить разные фото в каждый из div с помощью css? Очень важно, через css. С помощью background-image.

.fast-info {
  width: 85%;
  display: flex;
  justify-content: space-between;
  border: 1px solid;
  margin: 0 auto;
  margin-top: 90px;
  text-align: center;
}

.fast-info .block {
  width: 300px;
}

.fast-info .block .icon {
  height: 70px;
  margin: 0 auto;
  width: 80px;
  background-color: red;
}
<div class="fast-info">
                        <div class="block">
                            <div class="icon"></div>
                            <h2>Fully Responsive</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur 
                                adipisicing elit, sed do eiusmod tempor incididunt 
                                ut labore et dolore.</p>
                        </div>
                        <div class="block">
                            <div class="icon"></div>
                            <h2>Easy to Customize</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur 
                                adipisicing elit, sed do eiusmod tempor incididunt 
                                ut labore et dolore.</p>
                        </div>
                        <div class="block">
                            <div class="icon"></div>
                            <h2>Direct Support</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur 
                                adipisicing elit, sed do eiusmod tempor incididunt 
                                ut labore et dolore.</p>
                        </div>
                    </div>

1 ответ 1

1

.fast-info {
  width: 85%;
  display: flex;
  justify-content: space-between;
  border: 1px solid;
  margin: 0 auto;
  margin-top: 90px;
  text-align: center;
}

.fast-info .block {
  width: 300px;
}

.fast-info .block .icon {
  height: 70px;
  margin: 0 auto;
  width: 80px;
  background-color: red;
  background-position: 50%, 50%;
  background-size: cover;
}

.fast-info .block:nth-child(1) .icon {
  background-image: url(https://i.warosu.org/data/tg/img/0255/21/1371959837013.png);
}

.fast-info .block:nth-child(2) .icon {
  background-image: url(https://cn.i.cdn.tides.test-ti-platform.com/content/342/showpage/%D0%BE%D0%B1%D1%8B%D1%87%D0%BD%D1%8B%D0%B8-%D0%BC%D1%83%D0%BB%D1%8C%D1%82%D0%B8%D0%BA/ru/regularshow-200x200.png);
}

.fast-info .block:nth-child(3) .icon {
  background-image: url(https://www.doma-kvartiry.com/images/gomer.jpg);
}
<div class="fast-info">
  <div class="block">
    <div class="icon"></div>
    <h2>Fully Responsive</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
  </div>
  <div class="block">
    <div class="icon"></div>
    <h2>Easy to Customize</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
  </div>
  <div class="block">
    <div class="icon"></div>
    <h2>Direct Support</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.