[英]i want to display my text at top-left over image how to do that
我正在用html css設計一個網頁，並在筆記本電腦上引導一切正常，但另一個小設備問題出了問題，即圖像上的文字不可見
我的代碼是
#titlecolor { color: #ef4d3b; } #textonbaner { position: absolute; top: 130px; align: left; color: white; } #sfr { border: 2px solid #ef4d3b; border-radius: 20px; padding: 10px; margin-left: 40%; margin-right: 40%; } /* Add a gray background color and some padding to the footer */ .carousel-inner img { width: 100%; /* Set width to 100% */ margin: auto; min-height: 100px; } /* Hide the carousel text when the screen is less than 600 pixels wide */ @media (max-width: 600px) { .carousel-caption { display: none; } } .service_background_color { color: white; background-color: #ef4d3b; margin-bottom: 3%; padding: 1%; border: 1px solid black; border-radius: 20px; } #areah { color: black; } #logo { width: 130px; height: 140px; } .citycerviceplce { background-color: #ef4d3b; border: 1px solid black; color: white; } .footermy { padding: 10px; margin-top: 5%; margin-bottom: 15px; border: 1px solid black; border-radius: 20px; } #copyright { margin-top: 5%; margin-bottom: 2%; }
<!DOCTYPE html> <html lang="en"> <head> <title>ROOM</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- ............................External css links ............................ --> <link rel="stylesheet" type="text/css" href="style.css"> <!-- ............................bootstrap links ............................ --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <!-- .............................................nav area.......................--> <div class="container text-center"> <div class="row"> <div class="col-md-6"> <span class="pull-left"> <img src="image/mymateroomsimg.png" id="logo"> </span> </div> <div class="col-md-6"> <span class="pull-right titleupb"> <h3 id="titlecolor">Rooms Available<br> Delhi | Agra | Mathura </h3> </span> </div> <div class="imageban"> <img src="image/mymateroomsbanner.jpg" alt="banner" class="img-responsive" /> <h3 id="textonbaner">Book @ 9910852431 </h3> </div> </div> <!--.................... start here ...............--> <u><h3>Let's Get Together With</h3></u> <div class="row service_background_color"> <div class="col-sm-1"> <p>Lovely Couples </p> </div> <div class="col-sm-1"> <p>Girls & boys</p> </div> <div class="col-sm-1"> <p>Corporate Colligues </p> </div> <div class="col-sm-1"> <p>College Friends </p> </div> <div class="col-sm-1"> <p>Corporates Cocktail </p> </div> <div class="col-sm-1"> <p>Employees</p> </div> <div class="col-sm-1"> <p>Awesome Weekend</p> </div> <div class="col-sm-1"> <p>Senior Citizens</p> </div> <div class="col-sm-1"> <p>School's Friends</p> </div> <div class="col-sm-1"> <p>Aunty & Moma </p> </div> <div class="col-sm-1"> <p>Professionals </p> </div> <div class="col-sm-1"> <p>Entrepreneurs</p> </div> </div> <!-- ..............Room Services are here..............................--> <u><h3>Room Services</h3></u> <div class="row service_background_color"> <div class="col-sm-1"> <p>Fully AC </p> </div> <div class="col-sm-1"> <p> Soft Linen</p> </div> <div class="col-sm-1"> <p>Free Breakfast</p> </div> <div class="col-sm-1"> <p>Clean Bathroom</p> </div> <div class="col-sm-1"> <p>Shower </p> </div> <div class="col-sm-1"> <p>Drinking Water</p> </div> <div class="col-sm-1"> <p>LED TV</p> </div> <div class="col-sm-1"> <p>Dish Cable</p> </div> <div class="col-sm-1"> <p>Free Wifi</p> </div> <div class="col-sm-1"> <p>Aunty & Moma </p> </div> <div class="col-sm-1"> <p>Smoking & Non Smoking </p> </div> <div class="col-sm-1"> <p>Seating Area</p> </div> </div> <!-- .................................................. Hotel Services are here.................................. --> <u><h3>Hotel Services</h3></u> <div class="row service_background_color"> <div class="col-sm-1"> <p>Friendly Staff </p> </div> <div class="col-sm-1"> <p>Powerback up</p> </div> <div class="col-sm-1"> <p>Lift </p> </div> <div class="col-sm-1"> <p>College Friends </p> </div> <div class="col-sm-1"> <p>Restaurant</p> </div> <div class="col-sm-1"> <p>24hrs Security</p> </div> <div class="col-sm-1"> <p>Local ID's Allowed</p> </div> <div class="col-sm-1"> <p>First Aid Kit</p> </div> <div class="col-sm-1"> <p>24 hrs Check In</p> </div> <div class="col-sm-2"> <p>Safe and Secure</p> </div> <div class="col-sm-1"> <p>Doctor on Call </p> </div> </div> <div class="row service_background_color"> <div class="col-sm-2"> <p>Family hotel </p> </div> <div class="col-sm-2"> <p>Parking Facility</p> </div> <div class="col-sm-2"> <p>CCTV Cameras</p> </div> <div class="col-sm-2"> <p>Laundry</p> </div> <div class="col-sm-2"> <p>Geyser</p> 24 hrs Check In </div> <div class="col-sm-2"> <p>Intercom & More...</p> </div> </div> <!-- ********************************* My Mate's Promise ******************************** --> <u><h3>My Mate's Promise</h3></u> <div class="row service_background_color"> <div class="col-sm-1"> <p>Couple friendly Room</p> </div> <div class="col-sm-1"> <p>Family Stay </p> </div> <div class="col-sm-1"> <p>College Friends </p> </div> <div class="col-sm-1"> <p>Secure and safe </p> </div> <div class="col-sm-1"> <p>No questions asked</p> </div> <div class="col-sm-1"> <p>Local ID's Allowed</p> </div> <div class="col-sm-1"> <p>Book as you need</p> </div> <div class="col-sm-1"> <p>SILENTLY & PRIVATELY</p> </div> <div class="col-sm-1"> <p>Unmarried couples allowed </p> </div> <div class="col-sm-1"> <p>Priority on Check In</p> </div> <div class="col-sm-2"> <p>Gifts on check out</p> </div> </div> <!-- ...................................My Mate Services.............................--> <u><h3>My Mate Services</h3></u> <div class="row service_background_color"> <div class="col-sm-2"> <p>Hotel Booking</p> </div> <div class="col-sm-2"> <p>Train Tickets </p> </div> <div class="col-sm-1"> <p>Tour Packages</p> </div> <div class="col-sm-2"> <p>Car Rental </p> </div> <div class="col-sm-1"> <p>PG Accomodation </p> </div> <div class="col-sm-2"> <p>Home Stay</p> </div> <div class="col-sm-2"> <p>Making Get Together</p> </div> </div> <!-- ................................... How Its Work ................................. --> <u><h3>How it's work </h3></u> <div class="row service_background_color"> <div class="col-sm-2"> <p>Book on Call& Confirm your Locaiton </p> </div> <div class="col-sm-2"> <p>Discus About your Place & Price </p> </div> <div class="col-sm-1"> <p>Pay as your way</p> </div> <div class="col-sm-2"> <p>Receive An Email or SMS</p> </div> <div class="col-sm-1"> <p>Asked for Pick Up your place</p> </div> <div class="col-sm-2"> <p>Show your Valid ID Proof</p> </div> <div class="col-sm-2"> <p>Easly Check in your Room </p> </div> </div> <!-- ................................... Locatuon ................................. --> <u><h3>Location</h3></u> <div class="row"> <div class="col-sm-4 citycerviceplce"> <h3 id="areah">Delhi's Room</h3> <p>Hotels & SPA in Karol Bagh</p> <p>Hotels & SPA in Paharganj</p> <p>Hotels & SPA Near Airport</p> <p>Hotels & SPA Near Railway Station</p> <p>Hotels & SPA in Noida</p> <p>Hotels & SPA in Gurgaon</p> <p>Hotels & SPA Rajeev Chowk</p> <p>Hotels & SPA Near Metro Station</p> <p>Hotels & SPA in Aero City</p> </div> <div class="col-sm-4 citycerviceplce"> <h3 id="areah">Agra's Room</h3> <h4>Hotels & SPA on Fatehabad Road</h4> <p>Hotels & SPA Near Taj Mahal</p> <p>Hotels & SPA Near Agra Cantt Railway Station</p> <p>Hotels & SPA Near Agra Fort</p> <p>Hotels & SPA on Sanjay Place Bus Stop</p> <p>Hotels & SPA in Dayalbagh</p> <p>Hotels & SPA in Baluganj</p> </div> <div class="col-sm-4 citycerviceplce"> <h3 id="areah">Mathura's Room</h3> <p>Hotels & SPA Near Refinery</p> <p>Hotels & SPA Near Krishna Temple</p> <p>Hotels & SPA Near Agra Fort</p> <p>Hotels Near Railway Station </p> <p>Hotel & SPA On Agra Mathura Heighway</p> </div> </div> <div class="row footermy"> <div class="col-sm-2">My mate's room</div> <div class="col-sm-2">Team</div> <div class="col-sm-2">Privacy & Policy</div> <div class="col-sm-2">Guest Policy</div> <div class="col-sm-2">Terms & Condition </div> <div class="col-sm-2">Contact Us</div> </div> <center> <p id="copyright">@ copyright Mymatesrooms Rooms & Spa All Rights Reserved. </p> </center> </div> </div> </body> </html>
我正在嘗試使用CSS解決該問題，但是當我打開一個小型設備時，文本礦石就隱藏了。
您在代碼中犯了兩個錯誤。 其中一項特別是關於引導程序的使用和一項基本的CSS誤解。
在Bootstrap的一行的正下方只能有2個col（在您的情況下為col-md-6）元素。 您的imageban是第三個元素，因此我將其移出該行以確保引導網格的行為正確。
為了將文本絕對定位在橫幅上，橫幅本身必須具有以下position: relative; 。 當前，文本從頂部到整個頁面的方向為130像素，因此在小型設備上，將橫幅向下推時，橫幅的位置要遠得多，但文本距離頂部仍相差130像素。
我修復了該問題，並將bannertext的上限值設置為0，所以它現在距banner的值為0px，而距頁面頂部的值為130px。
我修復了下面的代碼片段。
.imageban { position: relative; } #titlecolor { color: #ef4d3b; } #textonbaner { position: absolute; top: 0; color: white; } #sfr { border: 2px solid #ef4d3b; border-radius: 20px; padding: 10px; margin-left: 40%; margin-right: 40%; } /* Add a gray background color and some padding to the footer */ .carousel-inner img { width: 100%; /* Set width to 100% */ margin: auto; min-height: 100px; } /* Hide the carousel text when the screen is less than 600 pixels wide */ @media (max-width: 600px) { .carousel-caption { display: none; } } .service_background_color { color: white; background-color: #ef4d3b; margin-bottom: 3%; padding: 1%; border: 1px solid black; border-radius: 20px; } #areah { color: black; } #logo { width: 130px; height: 140px; } .citycerviceplce { background-color: #ef4d3b; border: 1px solid black; color: white; } .footermy { padding: 10px; margin-top: 5%; margin-bottom: 15px; border: 1px solid black; border-radius: 20px; } #copyright { margin-top: 5%; margin-bottom: 2%; }
<!DOCTYPE html> <html lang="en"> <head> <title>ROOM</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- ............................External css links ............................ --> <link rel="stylesheet" type="text/css" href="style.css"> <!-- ............................bootstrap links ............................ --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <!-- .............................................nav area.......................--> <div class="container text-center"> <div class="row"> <div class="col-md-6"> <span class="pull-left"> <img src="image/mymateroomsimg.png" id="logo"> </span> </div> <div class="col-md-6"> <span class="pull-right titleupb"> <h3 id="titlecolor">Rooms Available<br> Delhi | Agra | Mathura </h3> </span> </div> </div> <div class="imageban"> <img src="https://dummyimage.com/1500x500/55a7eb/fff" alt="banner" class="img-responsive" /> <h3 id="textonbaner">Book @ 9910852431 </h3> </div> <!--.................... start here ...............--> <u><h3>Let's Get Together With</h3></u> <div class="row service_background_color"> <div class="col-sm-1"> <p>Lovely Couples </p> </div> <div class="col-sm-1"> <p>Girls & boys</p> </div> <div class="col-sm-1"> <p>Corporate Colligues </p> </div> <div class="col-sm-1"> <p>College Friends </p> </div> <div class="col-sm-1"> <p>Corporates Cocktail </p> </div> <div class="col-sm-1"> <p>Employees</p> </div> <div class="col-sm-1"> <p>Awesome Weekend</p> </div> <div class="col-sm-1"> <p>Senior Citizens</p> </div> <div class="col-sm-1"> <p>School's Friends</p> </div> <div class="col-sm-1"> <p>Aunty & Moma </p> </div> <div class="col-sm-1"> <p>Professionals </p> </div> <div class="col-sm-1"> <p>Entrepreneurs</p> </div> </div> <!-- ..............Room Services are here..............................--> <u><h3>Room Services</h3></u> <div class="row service_background_color"> <div class="col-sm-1"> <p>Fully AC </p> </div> <div class="col-sm-1"> <p> Soft Linen</p> </div> <div class="col-sm-1"> <p>Free Breakfast</p> </div> <div class="col-sm-1"> <p>Clean Bathroom</p> </div> <div class="col-sm-1"> <p>Shower </p> </div> <div class="col-sm-1"> <p>Drinking Water</p> </div> <div class="col-sm-1"> <p>LED TV</p> </div> <div class="col-sm-1"> <p>Dish Cable</p> </div> <div class="col-sm-1"> <p>Free Wifi</p> </div> <div class="col-sm-1"> <p>Aunty & Moma </p> </div> <div class="col-sm-1"> <p>Smoking & Non Smoking </p> </div> <div class="col-sm-1"> <p>Seating Area</p> </div> </div> <!-- .................................................. Hotel Services are here.................................. --> <u><h3>Hotel Services</h3></u> <div class="row service_background_color"> <div class="col-sm-1"> <p>Friendly Staff </p> </div> <div class="col-sm-1"> <p>Powerback up</p> </div> <div class="col-sm-1"> <p>Lift </p> </div> <div class="col-sm-1"> <p>College Friends </p> </div> <div class="col-sm-1"> <p>Restaurant</p> </div> <div class="col-sm-1"> <p>24hrs Security</p> </div> <div class="col-sm-1"> <p>Local ID's Allowed</p> </div> <div class="col-sm-1"> <p>First Aid Kit</p> </div> <div class="col-sm-1"> <p>24 hrs Check In</p> </div> <div class="col-sm-2"> <p>Safe and Secure</p> </div> <div class="col-sm-1"> <p>Doctor on Call </p> </div> </div> <div class="row service_background_color"> <div class="col-sm-2"> <p>Family hotel </p> </div> <div class="col-sm-2"> <p>Parking Facility</p> </div> <div class="col-sm-2"> <p>CCTV Cameras</p> </div> <div class="col-sm-2"> <p>Laundry</p> </div> <div class="col-sm-2"> <p>Geyser</p> 24 hrs Check In </div> <div class="col-sm-2"> <p>Intercom & More...</p> </div> </div> <!-- ********************************* My Mate's Promise ******************************** --> <u><h3>My Mate's Promise</h3></u> <div class="row service_background_color"> <div class="col-sm-1"> <p>Couple friendly Room</p> </div> <div class="col-sm-1"> <p>Family Stay </p> </div> <div class="col-sm-1"> <p>College Friends </p> </div> <div class="col-sm-1"> <p>Secure and safe </p> </div> <div class="col-sm-1"> <p>No questions asked</p> </div> <div class="col-sm-1"> <p>Local ID's Allowed</p> </div> <div class="col-sm-1"> <p>Book as you need</p> </div> <div class="col-sm-1"> <p>SILENTLY & PRIVATELY</p> </div> <div class="col-sm-1"> <p>Unmarried couples allowed </p> </div> <div class="col-sm-1"> <p>Priority on Check In</p> </div> <div class="col-sm-2"> <p>Gifts on check out</p> </div> </div> <!-- ...................................My Mate Services.............................--> <u><h3>My Mate Services</h3></u> <div class="row service_background_color"> <div class="col-sm-2"> <p>Hotel Booking</p> </div> <div class="col-sm-2"> <p>Train Tickets </p> </div> <div class="col-sm-1"> <p>Tour Packages</p> </div> <div class="col-sm-2"> <p>Car Rental </p> </div> <div class="col-sm-1"> <p>PG Accomodation </p> </div> <div class="col-sm-2"> <p>Home Stay</p> </div> <div class="col-sm-2"> <p>Making Get Together</p> </div> </div> <!-- ................................... How Its Work ................................. --> <u><h3>How it's work </h3></u> <div class="row service_background_color"> <div class="col-sm-2"> <p>Book on Call& Confirm your Locaiton </p> </div> <div class="col-sm-2"> <p>Discus About your Place & Price </p> </div> <div class="col-sm-1"> <p>Pay as your way</p> </div> <div class="col-sm-2"> <p>Receive An Email or SMS</p> </div> <div class="col-sm-1"> <p>Asked for Pick Up your place</p> </div> <div class="col-sm-2"> <p>Show your Valid ID Proof</p> </div> <div class="col-sm-2"> <p>Easly Check in your Room </p> </div> </div> <!-- ................................... Locatuon ................................. --> <u><h3>Location</h3></u> <div class="row"> <div class="col-sm-4 citycerviceplce"> <h3 id="areah">Delhi's Room</h3> <p>Hotels & SPA in Karol Bagh</p> <p>Hotels & SPA in Paharganj</p> <p>Hotels & SPA Near Airport</p> <p>Hotels & SPA Near Railway Station</p> <p>Hotels & SPA in Noida</p> <p>Hotels & SPA in Gurgaon</p> <p>Hotels & SPA Rajeev Chowk</p> <p>Hotels & SPA Near Metro Station</p> <p>Hotels & SPA in Aero City</p> </div> <div class="col-sm-4 citycerviceplce"> <h3 id="areah">Agra's Room</h3> <h4>Hotels & SPA on Fatehabad Road</h4> <p>Hotels & SPA Near Taj Mahal</p> <p>Hotels & SPA Near Agra Cantt Railway Station</p> <p>Hotels & SPA Near Agra Fort</p> <p>Hotels & SPA on Sanjay Place Bus Stop</p> <p>Hotels & SPA in Dayalbagh</p> <p>Hotels & SPA in Baluganj</p> </div> <div class="col-sm-4 citycerviceplce"> <h3 id="areah">Mathura's Room</h3> <p>Hotels & SPA Near Refinery</p> <p>Hotels & SPA Near Krishna Temple</p> <p>Hotels & SPA Near Agra Fort</p> <p>Hotels Near Railway Station </p> <p>Hotel & SPA On Agra Mathura Heighway</p> </div> </div> <div class="row footermy"> <div class="col-sm-2">My mate's room</div> <div class="col-sm-2">Team</div> <div class="col-sm-2">Privacy & Policy</div> <div class="col-sm-2">Guest Policy</div> <div class="col-sm-2">Terms & Condition </div> <div class="col-sm-2">Contact Us</div> </div> <center> <p id="copyright">@ copyright Mymatesrooms Rooms & Spa All Rights Reserved. </p> </center> </div> </div> </body> </html>
如何將文本位於左下角的<td>標簽內的圖像位置設置在左上角
[英]How to set image position inside <td> tag to be on top-left corner while text is on the left-bottom
我想在圖像面板上顯示蒙版，並在其上設置特定的蒙版按摩，或在圖像的左上角設置圖標
[英]I want to show mask on an image panel and set particular mask massage on it or set icon on the top-left corner of the image
如何計算HTML元素的左上角和窗口的左上角之間的距離？
[英]How to calculate the distance between the top-left corner of an HTML element and the window top-left corner?
使用javascript / jquery將div定位在圖片的左上角
[英]position div at top-left corner of image using javascript/jquery
我想檢測用戶是否單擊了圖像的左上方，右上方，左下方或右下方。
[英]I want to detect if the user clicks over the top left, the top right, the bottom left, or the bottom right part of the image.
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.