时间戳

首页 > 解决方案 > 如何在图像上显示文本并在我的页面中正确定位该图像？

html - 如何在图像上显示文本并在我的页面中正确定位该图像？

问题描述

我正在尝试将图像添加到图像底部带有文本的页面。但是，我遇到了 3 个问题：

  1. 图像未正确加载；它要么由同一图像的网格组成，要么是原始图像的裁剪。

  2. 图像定位不正确，我可以将其从上到下移动，但无法将其从左侧移开。

  3. 文本未正确加载到图像顶部。

这是我的代码：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Himalayas</title>

        <link rel=stylesheet href="stylesheet.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    </head>
    <body>
        <div class="title-image">
            <div class="title-text">
                Text Here
            </div>
        </div>
    </body>
</html>

SCSS：

$title-left:150px;
.title-image{
    color: red;
    position:relative;
    top:$title-top;
    left:$title-left;
    height:100px;
    width:200px;
    background-size:100%;
    background-image: url(TitleMountain.png);
}
.title-text{
    position:relative;
    top:$title-top+70;
    left:$title-left;
}

任何帮助是极大的赞赏

标签： htmlcsssass

解决方案

推荐阅读