我是一个相当新的编码，已经在它的几个小时现在一个月。在过去的几个小时里，我一直被困在我附上的两张图片中的问题上。我已经尝试了搜索答案和各种方法，如最小宽度，显示：Flex，调整字体大小从自动缩放与vw和使用REM。我只想让我的文本留在笔记本电脑屏幕内，无论屏幕大小，我正在查看它。我知道我可以使用简单的方式，只是photoshop的照片与文本，但我想学习如何做与编码为未来的项目以及。我确实想让图片缩放一点，这样它就可以在手机上观看，例如一个ok大小的手机。你能帮帮我吗？
null
body {
margin: 0;
text-align: center;
}
h1 {
color: #66BFBF;
font-family: "Dancing Script", Verdana, Geneva, Tahoma, sans-serif;
font-size: 5vw;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.top-container {
background-color: #ccf2f4;
padding-top: 50px;
position: relative;
}
.laptop {
width: 50%;
height: 50%;
}<section>
<div class="top-container">
<img class="laptop" src="img/laptop.png" alt="cloud-img">
<img class="top-cloud" src="img/cloud.png" alt="cloud-img">
<h1>I'm Nhien</h1>
<h2 class="dreamer">just a gamer with big dreams.</h2>
</div>
</section>null
您也可以从www.nhienweb.com访问该网站
您应该将图像添加到节或div的背景中。
对于这个答案，我要将它添加到“背景”部分中。
<section>
<div class="top-container">
<img class="top-cloud" src="img/cloud.png" alt="cloud-img">
<h1>I'm Nhien</h1>
<h2 class="dreamer">just a gamer with big dreams.</h2>
</div>
</section>
在HTML中，我已经从HTML中删除了laptop img，并将其添加到CSS中。我会把云定位为绝对的。
下面是此代码的css
body {
margin: 0;
text-align: center;
}
h1 {
color: #66BFBF;
font-family: "Dancing Script", Verdana, Geneva, Tahoma, sans-serif;
font-size: 5vw;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.top-container {
background-color: #ccf2f4;
padding-top: 50px;
position: relative;
}
.top-cloud {
position: absolute;
top: 0;
left: 0;
/* Positioned it relative to the top-container */
}
section {
background-image: url([your path to img relative to the css file]);
background-size: cover;
/* bg size to cover makes it what you want gives it full width at any screen */
}
如果这无济于事，请评论和问我。
