如何将附加的背景集成到响应式网站中？还有一个附加的移动视图和背景。
我曾尝试将它作为 SVG 图形，但效果不佳，因为它总是奇怪地缩放并且没有响应。 CSS中的“clip-path”也对我不起作用。
还有一个PNG/JPG图像不好，因为质量不好或文件太大。
如何显示这个绝对响应的背景？如果可能，它应该可以在手机上显示，但也可以在 4k (8k) 上显示。
我期待任何答案！
图片：https://drive.google.com/drive/u/0/folders/1olJcDIMsbi2mAEbbr9vyf9n74ENaMeWB
【问题讨论】：
标签： html css responsive-design background responsive
看看这个可能会有所帮助
img {
width: 30%;
display: inline-block
}
body {
background-image: url(https://i.ibb.co/SPBfZxS/bg1-1.png);
background-size: cover;
color: white;
}
button {
padding: 10px 20px;
background: #2BBBAD;
color: white;
border: 0;
font-size: 15px;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
cursor: pointer;
border-radius: 4px;
outline: 0;
text-transform: uppercase;
user-select: none;
transition: all .2s;
}
@media only screen and (max-width: 600px) {
img {
width: 100%;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.hero-image {
background-image: url("/w3images/photographer.jpg");
background-color: #cccccc;
height: 400px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style>
</head>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">I am [YOUR_NAME_HERE]</h1>
<h3>[INSERT_TAGLINE_HERE]</h3>
<button>Button</button>
</div>
</div>
<div style="padding:20px">
<p>Page content..</p>
<img src="https://via.placeholder.com/300x200">
<img src="https://via.placeholder.com/300x200">
<img src="https://via.placeholder.com/300x200">
<img src="https://via.placeholder.com/300x200">
</div>
</body>
</html>@media only screen and (max-width: 600px) {
img {
width: 100%;
}
【讨论】：
<div class="image"><svg></svg> </div>
@media only screen and (max-width: 600px) { .image { width: 100%; }