主页 / 问题 / 1595577
Accepted
Ярослав Овчар
Asked:2024-10-03 18:59:54 +0000 UTC2024-10-03 18:59:54 +0000 UTC

背景图像和响应式布局

  • 772

有一个布局（https://www.figma.com/design/v3CYjno3KdI1XdKkhe7okC/Web-Studio-(Version-2.1)-(Copy)?node-id=3-7653&node-type=canvas&t=GIj8ZFvJBqvxqICs-0）。横幅背景图像（英雄）有问题。对于移动版本，您需要宽度为视口的 100%，高度为 400px，但是使用这些样式，图像不能完全适合，但如果设置包含，则背景图像在居中且不拉伸。

.hero {
    padding-top: 118px;
    padding-bottom: 118px;

    min-height: 400px;
    background-image: linear-gradient(to right, rgba(47, 48, 58, 0.4), rgba(47, 48, 58, 0.4)), url("../images/hero/bg-img.jpg");
    background-image: url("../images/hero/bg-img.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

<section class="hero">
        <h1 class="hero__title">Ефективні рішення для<br />вашого бізнесу</h1>
        <button type="button" class="button hero__button" data-modal-open>
          Замовити послугу
        </button>
      </section>
html

1 个回答

  1. Best Answer

    试试这个：

    .hero {
  background-image: linear-gradient(to right, #2F303A66, #2F303A66), url(https://s3-alpha-sig.figma.com/img/1131/4362/dd953143a8a4d9f86ec8d71afc0e8103?Expires=1728864000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=I6FHDT8LO0wqJ5oFq4YmFGOEFKbqVZt3owzspvcVQKS54a2w6O5z5pMUehZhSvS~V5-8HAe3GqC~bcHGkPvWRLlmZCPjR7i~NWeYQb0LiIwM2Mwz1ITJ5wre8Yc~ZGQItOw8fk5iv1DuFJEN~zuseQq3f5i9aP0liBZ884AuPkwQeag8-tAA8G3877cULRNGx23J6lAP6Zj1Ejw8Op1AlrI4p1uOAR3r-fDkhqpoc0paY2lbpEQUvj9K096EefCXL-OQpM4ob144lqbeI9ZPIykiuDLs9MIHhLKakMg-OyLFPaCTYSSwe2HwYv89yc4knpuhsMOc0PS5wQrsKYrB1A__);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: clamp(400px, calc(100vw * 600 / 1600), 600px);
  max-width: 1600px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #ffffff;
}
    <section class="hero">
  <h1 class="hero__title">Ефективні рішення для<br />вашого бізнесу</h1>
  <button type="button" class="button hero__button" data-modal-open>
        Замовити послугу
    </button>
</section>

    • 0

相关问题