(HTML) 图像中的文本（如果缩放到移动尺寸）（骨架框架）

Question

我正在使用骨架框架制作我的第一个投资组合网站，

该网站在我的屏幕上看起来不错（1920 1080），但如果我尝试将其缩放到手机（nexus 5x），文本会自动进入图像

谁能解释一下为什么文字会出现在图片中？

这里有问题的截图： https://gyazo.com/8f7be918817a9c3580fcae51b72442b4

如果您想在线查看网站：

https://test.luukkenselaar.nl/

谢谢！

Answer 1

问题在于您的 html 布局。不要使用<img> 标签将图像设置为分割的背景。 而是尝试将图像设置为任何 <div> 的 css 背景，并使用媒体查询更改 div 的最小高度以使其响应。

例如：

.target-division {
background: url('../img/some_img.png');
background-repeat: no-repeat; 
min-height: 770px;
}

根据您的需要更改最小高度。 您也可以删除此代码：

.container {
    margin-top: 30%;
}

这应该可以解决您当前的问题。