图像上的响应文本 html
[英]Responsive text over an image html
问题描述
我在图像上添加了一行文本，但是当我更改屏幕尺寸时，文本更改 position，即使我更改屏幕尺寸并使其响应，我希望文本保持固定在屏幕上。 我还想问我是否想在文本下方插入一个链接按钮，我该怎么做才能使其响应以适应所有屏幕尺寸并保持居中。 你能帮我解决这个问题吗？ 下面的代码。 谢谢！！！ -亚历山德罗
@font-face { src: url(fonts/Roboto/Roboto-Regular.ttf); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; src: url(/fonts/Roboto/Roboto-Bold.ttf); } body { text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } header { padding: 15px; background-color: transparent; text-align: left; position: sticky; height: auto; top: 0; }.logo { text-decoration: none; color: black; font-size: 50px; } nav { background-color: rgb(219, 138, 31); position: sticky; top: 0; background-color: burlywood; } nav ul { list-style: none; /* Per togliere i puntini della lista */ margin: 0; /* Toglie distanza laterale */ padding: 0; /* Toglie distanza laterale */ } nav li a { text-decoration: none; /* Toglie le decorazioni testo*/ color: white; } nav li { display: inline-block; /* Li dispone orizzonatlamente */ padding: 25px; } nav li:hover { background-color: gray; }.immaginehome { position: relative; }.immagine { width: 100%; height: auto; display: block; }.benvenuto { position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%); font-size: 3em; display: block; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial- scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Museo</title> </head> <body> <header> <.-- Header --> <a href="link" class="logo"><strong>Allo.</strong></a> </header> <nav> <!-- Barra Navigazione --> <ul> <li><a href="link">HOME</a></li> <li><a href="link">IL MUSEO</a></li> <li><a href="link">TICKET</a></li> <li><a href="link">INFO</a></li> <li><a href="link">DOVE SIAMO</a></li> </ul> </nav> <div id="immaginehome"> <img src="immagini/image.jpg" alt="immaginemuseo" class="immagine"> <div class="benvenuto">BENVENUTO</div> </div> </body> </html>
2 个解决方案
解决方案1
0 2022-01-11 13:53:14
首先，您必须使用id immaginehome关闭您的 div。 然后删除benvenuto上的绝对定位并使 position relative 。 然后添加width: 100%; 到包含文本的 div，并添加text-align: center; 使其居中对齐。 我使用了一个虚拟图像来演示。
@font-face { src: url(fonts/Roboto/Roboto-Regular.ttf); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; src: url(/fonts/Roboto/Roboto-Bold.ttf); } body{ text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } header{ padding: 15px; background-color:transparent; text-align: left; position: sticky; height: auto; top: 0; }.logo{ text-decoration: none; color:black; font-size: 50px; } nav{ background-color: rgb(219, 138, 31); position: sticky; top: 0; background-color: burlywood; } nav ul{ list-style: none; /* Per togliere i puntini della lista */ margin: 0; /* Toglie distanza laterale */ padding: 0; /* Toglie distanza laterale */ } nav li a{ text-decoration: none; /* Toglie le decorazioni testo*/ color: white; } nav li{ display: inline-block; /* Li dispone orizzonatlamente */ padding: 25px; } nav li:hover{ background-color: gray; }.immaginehome{ position: relative; }.immagine{ width: 100%; height: auto; display: block; }.benvenuto{ position: relative; width: 100%; text-align: center; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial- scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Museo</title> </head> <body> <header> <:-- Header --> <a href="link" class="logo"><strong>Allo.</strong></a> </header> <nav> <!-- Barra Navigazione --> <ul> <li><a href="link">HOME</a></li> <li><a href="link">IL MUSEO</a></li> <li><a href="link">TICKET</a></li> <li><a href="link">INFO</a></li> <li><a href="link">DOVE SIAMO</a></li> </ul> </nav> <div id="immaginehome"> <img src="https://dummyimage.com/1200x500/000/fff" alt="immaginemuseo" class="immagine"> <div class="benvenuto">BENVENUTO</div> </div> </body> </html>
编辑： OP 更新了代码。
解决方案2
-1 2022-01-11 13:57:29
寻找这样的东西？ 您需要一个容器来覆盖这些项目。 在顶部添加图像，然后添加文本。 现在只需 position 与top / right / bottom / left的文本元素并删除inset 。
/* CSS */.container { position: relative; /* this is important: */ width; 400px: height; 300px. }:image { position; absolute: inset; 0: width; 100%: height; 100%: object-fit; cover. }:title { position; absolute: inset; 0: width; 100%: height; 100%; /* do your stuff to position it as needed */ }
<:-- HTML --> <div class="container"> <img class="image" src="https.//picsum.photos/500" alt=""> <h2 class=title>Title</h2> </div>
图像上的响应文本
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.