我正在构建一个简单的响应式登录页面。我有一个半圆形的背景图像(svg(，我希望它覆盖里面的所有内容并显示全高。
我的演示：https://codepen.io/1412108/pen/GxwQgz?editors=1100
它工作正常，至少在中小屏幕中。这里的问题是，在较大的屏幕上，它覆盖了里面的所有内容，但它失去了背景的底部(曲线(。您可以调整浏览器大小或缩小浏览器以查看问题。
首先，我使用了像background-position: center -10vw这样的负位置background-postion。它有效，但不适用于所有屏幕。我想知道是否基于某些内容(例如 css 或 javscript 中的calc(的每个屏幕都有任何解决方案？
而不是
background-position: center;
您可以使用
background-position: bottom;
这样可以确保您在底部拥有半圆形部分。
不确定这是您要查找的，但请尝试以下操作：
在 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>和代码笔链接 https://codepen.io/Cata_John/pen/wmQyRG?editors=1100
将
background-size: cover;更改为background-size: 200%;将解决问题
它甚至适用于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>