css 缩放窗体后面的背景图像

y53ybaqx 于 2023-05-08 发布在其他

关注(0)|答案(1)|浏览(131)

我想缩放表单元素后面的背景图像：
下面是我的例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>

        .header {
            background-color: white;
            padding: 20px;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
        }

        .search-input-group {
            display: flex;
            justify-content: center;
            gap: 8px;
        }

        .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .image-overlay:hover {
            opacity: 1;
        }

        .image-info {
            position: absolute;
            bottom: 10px;
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding: 0 10px;
            color: white;
        }

        .image-info .icon {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .position-relative:hover .image-overlay {
            opacity: 1;
        }

        .container-background {
            position: relative;
            width: 100%;
        }

        .container-background::before {
            content: "";
            position: absolute;
            top: -150px;
            left: 0;
            right: 0;
            bottom: -150px;
            background-image: url('https://generations.krea.ai/images/cda5a90c-6128-4b50-aa07-fd0fae51b49b.webp');
            background-size: cover;
            background-position: center;
            z-index: -1;
        }

        .content-wrapper {
            padding-top: 150px;
            padding-bottom: 150px;
        }
    
    </style>
</head>

<body>
<header class="p-3 mb-3 border-bottom sticky-top bg-white">
  <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
          <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none" style="
          font-size: 20px;
          color: black;
      ">
              Test
          </a>
          <div class="col-md-3 text-end ms-auto"> <!-- Add the "ms-auto" class here -->
              <a href="#" class="btn btn-primary ms-3">
                  Submit
              </a>
          </div>
      </div>
  </div>
</header>

    <div class="container container-background">
        <div class="content-wrapper">
            <form method="GET" action="" class="text-center search-box">
                <div class="row align-items-center">
                    <div class="col-9">
                        <div class="search-input-group">
                            <input type="search" name="search" class="form-control"
                                placeholder="Search..." value="">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </div>
            </form>
            <div class="col-12">
                <div class="mt-1">
                    <span class="badge bg-secondary tag" data-tag="test1">Test 1</span>
                    <span class="badge bg-secondary tag" data-tag="test2">Test 1</span>
                    <span class="badge bg-secondary tag" data-tag="test3">Test 1</span>
                </div>
            </div>
        </div>
    </div>
    
<div class="row" id="image-container">
    <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
        <a href="">
            <div class="position-relative">
                <img src="https://generations.krea.ai/images/06d734d7-7220-4c61-89b5-aee102b798da.webp" alt="" class="img-fluid">
            </div>
        </a>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
        <a href="">
            <div class="position-relative">
                <img src="https://generations.krea.ai/images/06d77c3a-1050-4c39-a33a-a79887f9ffd1.webp" alt="" class="img-fluid">
            </div>
        </a>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
        <a href="">
            <div class="position-relative">
                <img src="https://generations.krea.ai/images/06db115d-fae9-48db-bc14-e3ed9cb83427.webp" alt="" class="img-fluid">
            </div>
        </a>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
        <a href="">
            <div class="position-relative">
                <img src="https://generations.krea.ai/images/06e1e639-7207-48ef-a2ca-3f4e70b14796.webp" alt="" class="img-fluid">
            </div>
        </a>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
        <a href="">
            <div class="position-relative">
                <img src="https://generations.krea.ai/images/06eac403-517e-4159-ab1a-b97bd5380d04.webp" alt="" class="img-fluid">
            </div>
        </a>
    </div>
</div>
    
        <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>

</html>

如果我将<div class="container container-background"> Package 在div.row中，则背景图像会缩放。
此外，与<div class="row" id="image-container">有重叠。
最后，表单应该有一个缩放的背景图像，<div class="row" id="image-container">不应该重叠。
有什么建议如何缩放背景图像吗？

css

来源：https://stackoverflow.com/questions/76194471/scale-background-image-behind-form

1条答案

按热度按时间

muk1a3rh1#

我认为使用网格会让你的页面结构更容易。你有1列，3行。第一行是标题第二个是形式与背景第三你的图像在代码中有后，你可以玩grid-template-row值，把px值或百分比实际上：72 px for header 35% for form 1fr for images请注意，网格默认单元格是拉伸的，这意味着表单单元格是100%宽度，您在高度中输入的值（这里为35%）

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">.pageContainer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 72px 35% 1fr;
  row-gap: 10px;
}

.header {
  background-color: white;
  padding: 20px;
}

.search-input-group {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.container-background {
  background-image: url('https://generations.krea.ai/images/cda5a90c-6128-4b50-aa07-fd0fae51b49b.webp');
  background-size: cover;
  background-position: center;
}

.content-wrapper {
  position: relative;
  z-index: 1;
  padding-top: 50px;
  padding-left: 50px;
}

<div class="pageContainer">

  <div class="header p-3 mb-3 border-bottom sticky-top bg-white">
    <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none" style="font-size: 20px;color: black;"> Test </a>
        <div class="col-md-3 text-end ms-auto">
          <!-- Add the "ms-auto" class here -->
          <a href="#" class="btn btn-primary ms-3"> Submit </a>
        </div>
      </div>
    </div>
  </div>

  <div class="container container-background">
    <div class="content-wrapper">
      <form method="GET" action="" class="text-center search-box">
        <div class="row align-items-center">
          <div class="col-9">
            <div class="search-input-group">
              <input type="search" name="search" class="form-control" placeholder="Search..." value="">
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </div>
        </div>
      </form>
      <div class="col-12">
        <div class="mt-1">
          <span class="badge bg-secondary tag" data-tag="test1">Test 1</span> <span class="badge bg-secondary tag" data-tag="test2">Test 1</span> <span class="badge bg-secondary tag" data-tag="test3">Test 1</span>
        </div>
      </div>
    </div>
  </div>

  <div class="row" id="image-container">
    <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
      <a href="">
        <div class="position-relative">
          <img src="https://generations.krea.ai/images/06d734d7-7220-4c61-89b5-aee102b798da.webp" alt="" class="img-fluid">
        </div>
      </a>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
      <a href="">
        <div class="position-relative">
          <img src="https://generations.krea.ai/images/06d77c3a-1050-4c39-a33a-a79887f9ffd1.webp" alt="" class="img-fluid">
        </div>
      </a>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
      <a href="">
        <div class="position-relative">
          <img src="https://generations.krea.ai/images/06db115d-fae9-48db-bc14-e3ed9cb83427.webp" alt="" class="img-fluid">
        </div>
      </a>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
      <a href="">
        <div class="position-relative">
          <img src="https://generations.krea.ai/images/06e1e639-7207-48ef-a2ca-3f4e70b14796.webp" alt="" class="img-fluid">
        </div>
      </a>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
      <a href="">
        <div class="position-relative">
          <img src="https://generations.krea.ai/images/06eac403-517e-4159-ab1a-b97bd5380d04.webp" alt="" class="img-fluid">
        </div>
      </a>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-05-08

我来回答

css 缩放窗体后面的背景图像

1条答案

相关问题

热门标签

最新问答