Question

如何将我的名字和姓氏显示在中间顶部的图像中（从顶部有一点空间），并使其位置与图像保持一致渲染浏览器更小或更大？

（我见过这个：https://www.w3schools.com/howto/howto_css_image_text.asp，但还有其他方法吗？）

欢迎任何帮助，

body{
background-image: url(http://www.icotoken.tel/images/slider_slide_5.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
text-align: center;
justify-content: center;
align-items: center;
color: white;
}

.bigger{
padding: 30px;
height: 300px;
}

<div>
<img src="https://pbs.twimg.com/media/DYwc96nXkAY1xFh.jpg" class= "bigger">
<h3>First Name</h3>
<h3>Last Name</h3>
</div>

Answer 1

这就是你想要的吗？

有关详细信息，请参阅此post。

body{
background-image: url(http://www.icotoken.tel/images/slider_slide_5.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
text-align: center;
color: white;
}

.container {
  position:relative;
}

.TextContainer {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%,0);
 
}

<div class="container"><img class="bigger" src="https://pbs.twimg.com/media/DYwc96nXkAY1xFh.jpg"/>
  <div class="TextContainer">
    <h3>First Name</h3>
    <h3>Last Name</h3>
  </div>
</div>

图像中的文字

1 个答案: