主页 / 问题 / 1546299
Accepted
Aноним
Asked:2023-10-17 12:16:16 +0800 CST2023-10-17 12:16:16 +0800 CST

如何将两张图片放在一起，使后面的矩形突出？

  • 772

.preview__items{
display: flex;

}

.preview__item + .preview__item{
margin-left: 30px;

}

.color__block{
    width: 350px;
    height: 256px;
background-color: #D48A5C;       
top: -14px;

}
<div class="preview__items">
     <div class="preview__item">
        <img class="photo__list" src="img/Group 128.jpg" alt="">
      
        <span  class="number">01</span>
        <h4 class="list__name">Best Coffee Flavor</h4>
    <p class="list__text">Curabitur semper erat a lacusey sedny <br>
        consequat,sit ametey.</p>
    </div>

    <div class="preview__item">
        <img class="photo__list" src="img/Group 129.jpg" alt="">
        <span class="number">02</span>
        <h4 class="list__name">Proper Roasting</h4>
    <p class="list__text">Curabitur semper erat a lacusey sedny <br>
        consequat,sit ametey.</p>
    </div>

    <div class="preview__item">
        <img class="photo__list" src="img/Group 130.jpg" alt="">
        <span class="number">03</span>
        <h4 class="list__name">Place to Get Lost</h4>
    <p class="list__text">Curabitur semper erat a lacusey sedny <br>
        consequat,sit ametey.</p>
    </div> 
</div>

][1]] 2

css3

1 个回答

  1. Best Answer

    例子

    这是对多个背景的很好的描述 https://habr.com/ru/companies/ruvds/articles/512864/

    .preview__items {
  display: flex;
  gap: 30px;
}

.preview__item {
  width: 370px;
  height: 276px;
  background-color: #D48A5C;
  background: linear-gradient(#FFF, #BCB) top 0 left 20px / 150px 90px no-repeat, url('https://avatars.mds.yandex.net/i?id=3982c8f95e96cc6a7725c989b6013bc96d8c944e-8375627-images-thumbs&n=13') top 0 left 20px / 350px 250px no-repeat, linear-gradient(#D48A5C, #D48A5C) top 20px right 20px / 350px 270px no-repeat;
}

.list__name,
.number {
  padding: 0 30px;
}

.list__text {
  padding: 20px;
  color: white;
}
    <div class="preview__items">
  <div class="preview__item">
    <img class="photo__list" src="img/Group 128.jpg" alt="">

    <span class="number">01</span>
    <h4 class="list__name">Best Coffee Flavor</h4>
    <p class="list__text">Curabitur semper erat a lacusey sedny <br> consequat,sit ametey.</p>
  </div>

  <div class="preview__item">
    <img class="photo__list" src="img/Group 129.jpg" alt="">
    <span class="number">02</span>
    <h4 class="list__name">Proper Roasting</h4>
    <p class="list__text">Curabitur semper erat a lacusey sedny <br> consequat,sit ametey.</p>
  </div>

  <div class="preview__item">
    <img class="photo__list" src="img/Group 130.jpg" alt="">
    <span class="number">03</span>
    <h4 class="list__name">Place to Get Lost</h4>
    <p class="list__text">Curabitur semper erat a lacusey sedny <br> consequat,sit ametey.</p>
  </div>
</div>

    • 1

相关问题