如何使背景图像和表格响应？
[英]How to make background image and table responsive?
问题描述
我做了一个简单的 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" 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>
2 个解决方案
解决方案1
0 2019-12-10 06:29:22
您可以使用overflow-x: auto; （防止它从视图中消失）和-webkit-overflow-scrolling:touch; （使其响应）。
请使用%或em设置宽度和高度。
解决方案2
0 2019-12-10 06:36:07
背景和表格也使用以 % 为单位的高度和宽度。
像background-size: 100% 100%;
移除高度：1060px； 以 % 为单位。
如何使背景图像响应
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.