css

Question

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

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

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

首先，我使用 background-postion 和 background-position: center -10vw 这样的否定位置。它有效，但不适用于所有屏幕。我想知道是否有针对每个屏幕的任何解决方案（例如 css 或 javscript 中的 calc）？

Answer 1

它甚至适用于 col-md-*

响应式背景

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

.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;
}

<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>

Answer 2

不确定这是否是您要查找的内容，但试试这个：

在 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 link https://codepen.io/Cata_John/pen/wmQyRG?editors=1100

Answer 3

而不是

background-position: center;

您可以使用

background-position: bottom;

这样可以确保底部有半圆形部分。

Answer 4

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

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

css - Display background full height and cover content inside

html

background-image