如何使背景圖像和表格響應？
[英]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.