如何使背景图像和表格响应？

Posted

技术标签:

【中文标题】如何使背景图像和表格响应？【英文标题】：How to make background image and table responsive? 【发布时间】：2020-04-03 06:55:51 【问题描述】：

我已经完成了一个简单的 html 模板，其中有 4 个背景图像以及背景图像上的一些文本和表格。我想知道如何使背景图像、表格、文本响应。例如，当前在移动视图上查看时的表格，它水平出视图，我要下拉的表格，与文本相同，对于背景图像，它不必是全图像响应。这是我的代码

<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" >
    <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" >
    <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" ></th>
          <th><img src="icons/[2019-12-05-07-56-35]___Asset-5@4x.png" ></th> 
          <th><img src="icons/[2019-12-05-07-56-35]___Asset-6@4x.png" ></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" >
    <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" ></th>
          <th><img src="icons/[2019-12-05-07-56-36]___Asset-8@4x.png" ></th> 
          <th><img src="icons/[2019-12-05-07-56-36]___Asset-9@4x.png" ></th>
          <th><img src="icons/[2019-12-05-07-56-36]___Asset-10@4x.png" ></th> 
          <th><img src="icons/[2019-12-05-07-56-37]___Asset-11@4x.png" ></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" ></th>
          <th><img src="icons/[2019-12-05-07-56-37]___Asset-13@4x.png" ></th> 
          <th><img src="icons/[2019-12-05-07-56-38]___Asset-14@4x.png" ></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>

【问题讨论】：

【参考方案1】：

对于背景和表格也使用 % 的高度和宽度。

点赞background-size: 100% 100%;

移除高度：1060px；以 % 为单位。

【讨论】：

另外，考虑宽度和高度的自动。在此处查看 auto 和 % 之间的区别***.com/questions/15943009/… 我试过用auto和%，它完全删除了背景图片【参考方案2】：

您可以使用overflow-x: auto;（防止它离开视图）和-webkit-overflow-scrolling:touch;（使其具有响应性）。

请使用% 或em 设置宽度和高度。

【讨论】：

你能进一步解释我应该在哪里使用overflow-x: auto;吗？我使用了%，它完全删除了背景图片 你试过'em'吗？ style='overflow-x:auto' 应该在 img/ table/ text 对移动屏幕来说太宽的地方使用

以上是关于如何使背景图像和表格响应？的主要内容，如果未能解决你的问题，请参考以下文章

如何在响应式方形网格中仅使背景图像透明？

如何使 div 响应的背景图像？

如何使背景图像响应并覆盖所有区域

如何使背景颜色在移动设备上响应？

使背景图像响应

Flex网格和背景图像并排响应/缩放问题