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