影像html上的回應式文本-有解無憂

我在影像上添加了一行文本，但是當我更改螢屏尺寸時，文本更改位置，我希望文本保持固定在螢屏上，即使我更改螢屏尺寸并使其具有回應性。我還想問我是否想在文本下方插入一個鏈接按鈕，我該怎么做才能使其回應以適應所有螢屏尺寸并保持居中。你能幫我解決這個問題嗎？下面的代碼。謝謝！！！-亞歷山德羅

@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>

uj5u.com熱心網友回復：

首先，您必須使用id immaginehome. 然后洗掉您的絕對定位benvenuto并制作位置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 更新了代碼。

uj5u.com熱心網友回復：

尋找這樣的東西？您需要一個容器來覆寫這些專案。在頂部添加影像，然后添加文本。現在只需用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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/408404.html

標籤：

上一篇：如何修復settings.json檔案中的檔案結束預期錯誤？

下一篇：根據背景影像更改字體顏色