拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 影像html上的回应式文本

影像html上的回应式文本

白鹭 - 2022-02-11 2165 0 0

我在影像上添加了一行文本,但是当我更改荧屏尺寸时,文本更改位置,我希望文本保持固定在荧屏上,即使我更改荧屏尺寸并使其具有回应性。我还想问我是否想在文本下方插入一个链接按钮,我该怎么做才能使其回应以适应所有荧屏尺寸并保持居中。你能帮我解决这个问题吗?下面的代码。谢谢!!!-亚历山德罗

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

标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *