Bootstrap 将blob的一半放在html文档外

qzwqbdag 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(2)|浏览(163)

我正在构建一个带有一些SVG斑点的目标页面，这些斑点应该位于网页的边缘，一半在里面，一半在外面。当调整斑点以适应移动的维度时，问题发生了，位于右侧的斑点会产生大量的白色，从而向右滚动。我想在屏幕的右边缘“剪切”斑点。
我在这个项目中使用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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/74411219/placing-blob-half-outside-html-document

2条答案

按热度按时间

2uluyalo1#

不要将斑点放置为网格的一部分。请将其放置在：绝对和权利：-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>

赞(0）回复(0）举报 2022-12-16

pdkcd3nj2#

两种主要的做法：
第一种方法是将元素保留在容器中，但将“overflow：hidden”。你在这里做的是隐藏图像的溢出，意思是你试图隐藏从**图像溢出的内容。
第二个方法是在移动的上隐藏图片，而使用背景图片，这样会更容易，因为你不必处理溢出

赞(0）回复(0）举报 2022-12-16