>我做了一个简单的HTML模板，其中我有4个背景图像，背景图像上有一些文本和表格。我想知道如何使背景图像，表格，文本响应。例如，目前表格在移动视图上查看时，它水平退出视图，i表格下拉，与文本相同，对于背景图像，它不必是完整的图像响应。这是我的代码
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.hero-image1 {
background-image: url("https://cdn.shopify.com/s/files/1/0301/0065/files/rain_background_spring_gis_2048_2048x2048.jpg?6289901723855561721");
background-color: #cccccc;
height: 1060px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text1 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.hero-image2 {
background-image: url("https://cdn.shopify.com/s/files/1/0301/0065/files/rain_background_spring_gis_2048_2048x2048.jpg?6289901723855561721");
background-color: #cccccc;
height: 1060px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text2 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.hero-image3 {
background-image: url("https://cdn.shopify.com/s/files/1/0301/0065/files/rain_background_spring_gis_2048_2048x2048.jpg?6289901723855561721");
background-color: #cccccc;
height: 1100px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text3 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.hero-image4 {
background-image: url("https://cdn.shopify.com/s/files/1/0301/0065/files/rain_background_spring_gis_2048_2048x2048.jpg?6289901723855561721");
background-color: #cccccc;
height: 490px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text4 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.hero-image5 {
background-image: url("");
background-color: #353937;
height: 450px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text5 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
#rcorners1 {
/*border-radius: 25px;*/
border-top-right-radius: 25px;
border-top-left-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 15px;
}
#rcorners2 {
/*border-radius: 25px;*/
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
background: #555555;
padding: 20px;
width: 200px;
height: 40px;
}
#rcorners3 {
/*border-radius: 25px;*/
border-top-right-radius: 25px;
border-top-left-radius: 25px;
background: #73AD21;
padding: 20px;
width: 120px;
height: 22px;
}
#rcorners4 {
/*border-radius: 25px;*/
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
background: #555555;
padding: 20px;
width: 120px;
height: 100px;
}
</style><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="hero-image1">
<div class="hero-text1">
<br/><br/><br/><br/><br/><br/>
<img src="icons/[2019-12-05-07-56-32]___Asset-1@4x.png" width="200px">
<br/><br/>
<h1 style="font-size:60px">XXX</h1>
<br/><br/>
<h2 style="font-size:50px">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h2>
<!-- <button>Hire me</button> -->
</div>
</div>
<div class="hero-image2">
<div class="hero-text2">
<img src="icons/[2019-12-05-07-56-32]___Asset-2@4x.png" width="200px">
<h1 style="font-size:60px">XXX</h1>
<h2 style="font-size:50px">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h2>
<br/>
<!-- <button>Hire me</button> -->
<table style="width:100%">
<tr align="center">
<th><img src="icons/[2019-12-05-07-56-34]___Asset-4@4x.png" width="100px"></th>
<th><img src="icons/[2019-12-05-07-56-35]___Asset-5@4x.png" width="100px"></th>
<th><img src="icons/[2019-12-05-07-56-35]___Asset-6@4x.png" width="100px"></th>
</tr>
<tr align="center">
<td><p style="margin: 0px !important" id="rcorners1">XXXXX</p><p style="margin: 0px !important" id="rcorners2">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
<td><p style="margin: 0px !important" id="rcorners1">XXXXX</p><p style="margin: 0px !important" id="rcorners2">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
<td><p style="margin: 0px !important" id="rcorners1">XXXXX</p><p style="margin: 0px !important" id="rcorners2">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
</tr>
</table>
</div>
</div>
<div class="hero-image3">
<div class="hero-text3">
<br/><br/><br/><br/><br/><br/><br/>
<img src="icons/[2019-12-05-07-56-33]___Asset-3@4x.png" width="200px">
<h1 style="font-size:60px">XXX</h1>
<h2 style="font-size:50px">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h2>
<br/>
<!-- <button>Hire me</button> -->
<table style="width:100%">
<tr align="center">
<th><img src="icons/[2019-12-05-07-56-35]___Asset-7@4x.png" width="100px"></th>
<th><img src="icons/[2019-12-05-07-56-36]___Asset-8@4x.png" width="100px"></th>
<th><img src="icons/[2019-12-05-07-56-36]___Asset-9@4x.png" width="100px"></th>
<th><img src="icons/[2019-12-05-07-56-36]___Asset-10@4x.png" width="100px"></th>
<th><img src="icons/[2019-12-05-07-56-37]___Asset-11@4x.png" width="100px"></th>
</tr>
<tr align="center">
<td><p style="margin: 0px !important" id="rcorners3">XXXX</p><p style="margin: 0px !important" id="rcorners4">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
<td><p style="margin: 0px !important" id="rcorners3">XXXX</p><p style="margin: 0px !important" id="rcorners4">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
<td><p style="margin: 0px !important" id="rcorners3">XXXX</p><p style="margin: 0px !important" id="rcorners4">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
<td><p style="margin: 0px !important" id="rcorners3">XXXXX</p><p style="margin: 0px !important" id="rcorners4">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
<td><p style="margin: 0px !important" id="rcorners3">XXXXX</p><p style="margin: 0px !important" id="rcorners4">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
</tr>
</table>
</div>
</div>
<div class="hero-image4">
<div class="hero-text4">
<!-- <h1 style="font-size:50px">I am Jane Doe</h1>
<h3>And I'm a Photographer</h3>
<button>Hire me</button> -->
</div>
</div>
<div class="hero-image5">
<div class="hero-text5">
<h1 style="font-size:50px">XXX</h1>
<h2>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h2>
<br/>
<!-- <button>Hire me</button> -->
<table style="width:100%">
<tr>
<th><img src="icons/[2019-12-05-07-56-37]___Asset-12@4x.png" width="100px"></th>
<th><img src="icons/[2019-12-05-07-56-37]___Asset-13@4x.png" width="100px"></th>
<th><img src="icons/[2019-12-05-07-56-38]___Asset-14@4x.png" width="100px"></th>
</tr>
<tr>
<td><p><b>XXXXX</b></p></td>
<td><p><b>XXXXX</b></p></td>
<td><p><b>XXXXX</b></p></td>
</tr>
</table>
</div>
</div>
</body>
</html>您可以使用overflow-x: auto;(以防止它离开视图(和-webkit-overflow-scrolling:touch;(使其响应(。
请使用%或em来设置宽度和高度。
对背景和表格也使用高度和宽度(以 % 为单位(。
喜欢background-size: 100% 100%;
删除高度：1060px;以%为单位。