代码之家  ›  专栏  ›  技术社区  ›  jsPlayer

Css线性渐变50%左右上下移动问题

media-queries bootstrap-4 css3 twitter-bootstrap css
  •  0
  • jsPlayer  · 技术社区  · 6 年前

    enter image description here

    我编写了多种媒体查询和调整图像列的颜色百分比和最大高度。看起来我基本上做错了什么。有更好的引导解决方案吗?还是一种更好的css方式,可以在所有屏幕上工作? 

    .app-headline {
  background: linear-gradient(to left, #fff 50%, #d4272e 50%);
}

@media screen and (max-width: 992px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
  }
  .app-headline .text-content-left {
    background: #d4272e;
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 24rem;
  }
}

@media screen and (max-width: 768px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 17rem;
  }
}

@media (min-width: 768px) and (max-width: 768px) {}
    <html>

<head>
  <title>Products slider</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>


</head>

<body>
<div class="pt-4 pb-4">
  <h1>test</h1>
</div>
  <section class="app-headline border">
    <div class="container">
      <div class="row  py-5 text-white">
        <div></div>
        <div class="col-lg-6 pb-4 text-content-left">
          <div class="text-content-left-texts">
            <div class="inner-push-left">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2 col-sm-10 pl-0">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6  img-content-right align-self-center">
          <img class="content-right-image img-fluid" src="https://www.dropbox.com/s/i2cbe0ymwywya5f/app.png?dl=1" alt="there was an image">
        </div>
      </div>
    </div>
  </section>



  <script type="text/javascript">

  </script>


</body>

</html>











<!-- 
<section class="product-promotion-display border">
    <div class="">
      <div class="row no-gutters d-flex justify-content-center text-white">
        <div class="col-lg-6 text-content-left d-flex justify-content-center align-items-center pb-4">
          <div class="text-content-left-texts p-5 ">
            <div class="inner-push-left offset-lg-3">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6 d-flex justify-content-center align-items-center img-content-right">
          <img class="content-right-image img-fluid" src="./images/toolbox.png" alt="there was an image">
        </div>
      </div>
    </div>
  </section> -->
    2 回复  |  直到 6 年前
        1
  •  1
  •   Temani Afif    6 年前

    您需要从媒体查询中删除以下内容,您可以尝试使用伪元素进行着色,以创建溢出并隐藏白色部分: 

    .app-headline .text-content-left {
     background: #d4272e;
}


    .app-headline {
  background: linear-gradient(to left, #fff 50%, #d4272e 50%);
  overflow:hidden;
}

@media screen and (max-width: 992px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
  } 
  .app-headline .text-content-left {
    position:relative;
    z-index:0;
  }
  .app-headline .text-content-left::before {
    content:"";
    position:absolute;
    top:0;
    left:-50vw;
    right:-50vw;
    bottom:0;
    z-index:-1;
    background: #d4272e;
  }

  .app-headline .img-content-right {
    background: #fff;
    max-height: 24rem;
  }
}

@media screen and (max-width: 768px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
  }

  .app-headline .img-content-right {
    background: #fff;
    max-height: 17rem;
  }
}

@media (min-width: 768px) and (max-width: 768px) {}
    <html>

<head>
  <title>Products slider</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>


</head>

<body>
<div class="pt-4 pb-4">
  <h1>test</h1>
</div>
  <section class="app-headline border">
    <div class="container">
      <div class="row  py-5 text-white">
        <div></div>
        <div class="col-lg-6 pb-4 text-content-left">
          <div class="text-content-left-texts">
            <div class="inner-push-left">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2 col-sm-10 pl-0">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6  img-content-right align-self-center">
          <img class="content-right-image img-fluid" src="https://www.dropbox.com/s/i2cbe0ymwywya5f/app.png?dl=1" alt="there was an image">
        </div>
      </div>
    </div>
  </section>



  <script type="text/javascript">

  </script>


</body>

</html>











<!-- 
<section class="product-promotion-display border">
    <div class="">
      <div class="row no-gutters d-flex justify-content-center text-white">
        <div class="col-lg-6 text-content-left d-flex justify-content-center align-items-center pb-4">
          <div class="text-content-left-texts p-5 ">
            <div class="inner-push-left offset-lg-3">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6 d-flex justify-content-center align-items-center img-content-right">
          <img class="content-right-image img-fluid" src="./images/toolbox.png" alt="there was an image">
        </div>
      </div>
    </div>
  </section> -->
        2
  •  0
  •   Sarabjit Singh    6 年前

    请按此办理:-- 

    var height = jQuery(".app-headline .text-content-left").height();	
	var actual_height = height + 48 + 26 + 'px';
	jQuery(".app-headline").css("background","linear-gradient(to bottom, #d4272e " + actual_height.toString() + ", #fff 50%)");
     .app-headline {
  background: linear-gradient(to left, #fff 50%, #d4272e 50%);
}

@media screen and (max-width: 992px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
  }
  .app-headline .text-content-left {
    background: #d4272e;
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 24rem;
  }
}

@media screen and (max-width: 768px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 17rem;
  }
}

@media (min-width: 768px) and (max-width: 768px) {}
    <html>

<head>
  <title>Products slider</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>

</head>

<body>
<div class="pt-4 pb-4">
  <h1>test</h1>
</div>
  <section class="app-headline border">
    <div class="container">
      <div class="row  py-5 text-white">
        <div></div>
        <div class="col-lg-6 pb-4 text-content-left">
          <div class="text-content-left-texts">
            <div class="inner-push-left">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2 col-sm-10 pl-0">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0	pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6  img-content-right align-self-center">
          <img class="content-right-image img-fluid" src="https://www.dropbox.com/s/i2cbe0ymwywya5f/app.png?dl=1" alt="there was an image">
        </div>
      </div>
    </div>
	  
  </section>
    推荐文章
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号