Question

我正在构建一个简单的响应式登录页面。我有一个半圆形的背景图像（svg），我希望它覆盖里面的所有内容并显示全高。

我的演示：https://codepen.io/1412108/pen/GxwQgz?editors=1100

它工作正常，至少在中小屏幕上。这里的问题是，在较大的屏幕中，它覆盖了内部的所有内容，但它丢失了背景的底部（曲线）。您可以调整浏览器大小或缩小以查看问题。

首先，我使用了像background-postion这样的负位置的background-position: center -10vw。它可以工作，但不适用于所有屏幕。我想知道是否有针对某些内容的任何解决方案（如css或javscript中的calc）？

Answer 1

不确定这是你在找什么，但试试这个：

在svg容器和一些background-position: center bottom;上添加了padding-bottom（根据您的需要更改此内容）。

.main {
    background-image: url("https://svgshare.com/i/68x.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: 10vh;
}

.header .logo {
    margin: 0 auto;
    padding-top: 5%;
    padding-bottom: 5%;
}

.header .logo img{
    width: 8em;
}

.banner {
    text-align: center;
}

.banner .content {
}

.banner img {
    max-width: 300px;
    width: 100%;
}

.banner .content p {
    font-size: 0.8em;
    color: white;
    font-family: 'PingPang';
}

.banner .content .title {
    font-size: 2em;
    color: white;
}

.footer {
    margin-top: 1em;
    padding-top: 0;
    padding-bottom: 2em;
    text-align: center;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="main">
    <div class="container">
      <div class="row header">
        <div class="logo">
          <img src="https://svgshare.com/i/69T.svg" alt="logo">
        </div>
      </div>

      <div class="row banner">
        <div class="col-md-4 content">
          <div class="title">
            ABOUT US
          </div>
          <div class="text">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
              recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.。
          </div>
        </div>
        <div class="col-md-8 img-screen">
          <img src="http://knstekcom.r.worldssl.net/wp-content/uploads/2015/09/work-culture.png" alt="">
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row footer">
        Follow me
        Something here: ....
      </div>
    </div>
  </div>
</body>

</html>

和CodePen链接https://codepen.io/Cata_John/pen/wmQyRG?editors=1100

Answer 2

而不是

background-position: center;

您可以使用

background-position: bottom;

这可确保您在底部有半圆形部分。

Answer 3

它甚至适用于col-md-*

响应背景

background-position:50% 100%;
padding-bottom:10%;

＆＃13;

.main {
  background-image: url("https://svgshare.com/i/68x.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  padding-bottom: 10%;
}

.header .logo {
  margin: 0 auto;
  padding-top: 0%;
  padding-bottom: 5%;
}

.header .logo img {
  width: 8em;
}

.banner {
  text-align: center;
}

.banner .content {}

.banner img {
  max-width: 300px;
  width: 100%;
}

.banner .content p {
  font-size: 0.8em;
  color: white;
  font-family: 'PingPang';
}

.banner .content .title {
  font-size: 2em;
  color: white;
}

.footer {
  margin-top: 1em;
  padding-top: 0;
  padding-bottom: 2em;
  text-align: center;
}

＆＃13;

<div class="main">
  <div class="container">
    <div class="row header">
      <div class="logo">
        <img src="https://svgshare.com/i/69T.svg" alt="logo">
      </div>
    </div>

    <div class="row banner">
      <div class="col-md-4 content">
        <div class="title">
          ABOUT US
        </div>
        <div class="text">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.。
        </div>
      </div>
      <div class="col-md-8 img-screen">
        <img src="http://knstekcom.r.worldssl.net/wp-content/uploads/2015/09/work-culture.png" alt="">
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row footer">
    Follow me Something here: ....
  </div>
</div>

＆＃13;

Answer 4

将background-size: cover;更改为background-size: 200%;将解决问题

css - 显示背景全高和覆盖内容

4 个答案: