將blob一半放在html檔案之外

我正在構建一個帶有一些 SVG blob 的登錄頁面，這些 blob 位于網頁的邊緣，一半在里面，一半在外面。當為移動尺寸調整 blob 時會出現問題，位于右側的 blob 會產生大量空白，因此會向右滾動。我想在螢屏的右邊緣“剪切”blob。

我在這個專案中使用 Bootstrap 5。

預期結果：

實際結果：

已經嘗試添加overflow-x: hidden;和max-width: 100%;及其變體。

演示：

  /* CSS class for the blob: */

.cssloco {
  position: absolute;
  opacity: 1;
  left: 10%;
  top: 40%;
  z-index: -1;
  height: 100%;
  width: 200%;
}


/* CSS blob class for mobile: */

@media (max-width: 1200px) {
  .cssloco {
    overflow: hidden;
    left: 40%;
    top: 150%;
    height: 600px;
    width: 600px;
  }

<div class="d-flex container mt-15 justify-content-between">
  <div class="row">

    <div class="col-8 col-md-6 col-sm-8 order-0 order-lg-0 order-sm-0 animacion mensaje-responsive">
      <h1 class="text-start fw-bold">Estás a un mensaje de distancia.</h1>
      <p class="fs-5 fw-semibold">Olvidate de volver a entrar a varios sitios web para conseguir información. <span class="fw-bold">Aerobot</span> te proporciona la forma de tener todo en un mismo lugar, haciendo que tu operación sea <span class="fw-bold">más rápida y más segura, 100% gratis. ?? </span></p>
    </div>

    <div class="d-flex col col-md-6  order-1 order-sm-1 justify-content-center">

      <div class="svg-blob cssloco">
        <svg viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150%" id="blobSvg">
              <g transform="translate(151.32916831970215, 3.4678802490234375)">
                <defs>
                  <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color: rgb(76, 161, 175);"></stop>
                    <stop offset="100%" style="stop-color: rgb(196, 224, 229);"></stop>
                  </linearGradient>
                </defs>
                <path class="blob" d="M479.79863,286.0103Q472.04119,322.0206,452.55149,352.53089Q433.06179,383.04119,405.37643,404.81464Q377.69107,426.5881,351.37643,453.89702Q325.06179,481.20595,287.53089,468.08238Q250,454.95881,217.0103,453.44851Q184.0206,451.93821,151.9794,441.03089Q119.93821,430.12357,88.91762,409.59268Q57.89702,389.06179,52.17506,352.45881Q46.45309,315.85583,25.64417,282.92792Q4.83524,250,12.26316,212.44851Q19.69107,174.89702,53.56179,153.61327Q87.4325,132.32952,103.80893,101.78833Q120.18536,71.24714,149.05149,49.4897Q177.91762,27.73226,213.95881,30.73226Q250,33.73226,285.07208,34.14988Q320.14417,34.5675,351.69565,50.60869Q383.24714,66.64988,407.42792,92.46911Q431.60869,118.28833,436.97483,152.74714Q442.34096,187.20595,464.94851,218.60298Q487.55607,250,479.79863,286.0103Z" fill="url(#gradient)"></path>
              </g>
            </svg>
      </div>

      <img src="svg/chat1.svg" alt="" class="imagen-reporte animacion">

    </div>

  </div>
</div>

uj5u.com熱心網友回復：

不要將 blob 作為網格的一部分。使其位置：絕對和正確：-50%。并修復您的 SVG。它不應該在 blob 周圍有填充。全屏查看我的片段，你的 blob 很小時不會顯示。

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
}
#mycont1 {
  position: relative;
  height: 100%;
  padding: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.cssloco {
  position: absolute;
  opacity: 1;
  right: -50%;
  top: 0;
  z-index: -1;
  height: 100%;
}
.cssloco svg {
  height:100%;
}

<div id="mycont1" class="d-flex container mt-15 justify-content-between">
    <div class="row">
        <div class="col-8 col-md-6 col-sm-8 order-0 order-lg-0 order-sm-0 animacion mensaje-responsive">
            <h1 class="text-start fw-bold">Estás a un mensaje de distancia.</h1>
            <p class="fs-5 fw-semibold">Olvidate de volver a entrar a varios sitios web para conseguir información. <span class="fw-bold">Aerobot</span> te proporciona la forma de tener todo en un mismo lugar, haciendo que tu operación sea <span class="fw-bold">más rápida y más segura, 100% gratis. ?? </span></p>
        </div>
    </div>
    <div class="svg-blob cssloco">
        <svg viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150%" id="blobSvg">
            <g transform="translate(151.32916831970215, 3.4678802490234375)">
            <defs>
                <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color: rgb(76, 161, 175);"></stop>
                    <stop offset="100%" style="stop-color: rgb(196, 224, 229);"></stop>
                </linearGradient>
            </defs>
            <path class="blob" d="M479.79863,286.0103Q472.04119,322.0206,452.55149,352.53089Q433.06179,383.04119,405.37643,404.81464Q377.69107,426.5881,351.37643,453.89702Q325.06179,481.20595,287.53089,468.08238Q250,454.95881,217.0103,453.44851Q184.0206,451.93821,151.9794,441.03089Q119.93821,430.12357,88.91762,409.59268Q57.89702,389.06179,52.17506,352.45881Q46.45309,315.85583,25.64417,282.92792Q4.83524,250,12.26316,212.44851Q19.69107,174.89702,53.56179,153.61327Q87.4325,132.32952,103.80893,101.78833Q120.18536,71.24714,149.05149,49.4897Q177.91762,27.73226,213.95881,30.73226Q250,33.73226,285.07208,34.14988Q320.14417,34.5675,351.69565,50.60869Q383.24714,66.64988,407.42792,92.46911Q431.60869,118.28833,436.97483,152.74714Q442.34096,187.20595,464.94851,218.60298Q487.55607,250,479.79863,286.0103Z" fill="url(#gradient)"></path>
            </g>
        </svg>
    </div>
</div>

uj5u.com熱心網友回復：

兩種主要的做法：

第一個是將元素保留在容器中，但在容器上設定“溢位：隱藏”。您在這里所做的是隱藏影像的溢位，這意味著您嘗試隱藏影像中溢位的內容。

第二個是在移動設備上隱藏影像并使用背景影像，這樣會更容易，因為您不必處理溢位

標籤：htmlcss推特引导

上一篇：根據單元格值動態更改引導程式中表格懸停的顏色

下一篇：如何在錨鏈接上打開Bootstrap彈出模式單擊Angular