html - HTML - 图像上的文本（带链接）

问题描述

我正在尝试在图像上创建简单的文本，但我无法解决。

我创建了一个 <div id="banner> 并在这个部门中包含了一个图像和两个文本段落标签。我还使用 <A Herf=> 将文本链接到另一个 HTML .doc

我还尝试使用命令在图像中水平分隔文本。

我现在是学生，不是专家。

这是代码（仅限 HTML）没有 CSS

<!DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.0//EN">

<HTML>
    <HEAD>
        <TITLE>My Personal Website</TITLE>
<<link rel="stylesheet" type="text/css" href="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Testing\CSS\testing.css" />
</HEAD>

<BODY>

This is a test page . Currently testing Text over Image

<div id="banner">
  <img src="https://wp-assets.futurism.com/2021/02/nasa-panorama-perseverance-mars-rover-landing-site.jpg">
  <p id="home-text"><font size=6><A HREF="https://upload.wikimedia.org/wikipedia/commons/0/02/OSIRIS_Mars_true_color.jpg">Home</A></font> </p>  
  <p id="about_me-text"><font size=6><A HREF="https://www.scienceabc.com/wp-content/uploads/2016/06/mars-planet.jpg">About me</A></font></p>  
</div>


</body>

</HTML>

标签： html

试试这个，希望这对你有用。

//CSS

#txtOnImage {
    position: absolute;
    left: 0;    
    color: #fff;
}

//HTML

<div id="banner">
          <img src="https://wp-assets.futurism.com/2021/02/nasa-panorama-perseverance-mars-rover-landing-site.jpg">
          <span id="txtOnImage">This is a test page . Currently testing Text over Image</span>
          <p id="home-text"><font size=6><A HREF="https://upload.wikimedia.org/wikipedia/commons/0/02/OSIRIS_Mars_true_color.jpg">Home</A></font> </p>  
          <p id="about_me-text"><font size=6><A HREF="https://www.scienceabc.com/wp-content/uploads/2016/06/mars-planet.jpg">About me</A></font></p>  
        </div>

html - HTML - 图像上的文本（带链接）

问题描述

解决方案

推荐阅读