时间戳

首页 > 解决方案 > 来自文件夹和文本的背景页脚图像

html - 来自文件夹和文本的背景页脚图像

问题描述

我正在尝试通过从子文件夹中添加图像来在页脚中使用背景图像，并在页脚图像上添加自定义文本。我试图src在页脚标题之后插入页脚图像，但我最终让图像和文本彼此并排，顶部没有图层。

footer {
    text-align: center;
    margin: 3px;
    padding: 5px;
    color: black;
}
<footer>
    <img src="Images/ricepaper.png" alt="">
    <dl>
        <dt>
            <a id="Contact&nbsp;Us" style="color: #14ab3f"><b>Contact Us</b></a>
            <br>
            <br>
            <dd><b>City Manager</b>
            <dd><b>P.O. Box #####</b>
            <dd><b>City</b>
            <dd><b>### ###</b>
            </dd>
    </dl>
</footer>

标签： htmlcss

解决方案

使用 CSS background-image 代替该img元素：

background-image: url(Images/ricepaper.png);
background-size: cover;

所以你的代码变成

footer {
  background-image: url(Images/ricepaper.png);
  background-size: cover;
  text-align: center;
  margin: 3px;
  padding: 5px;
  color: black;
}
<footer>
  <dl>
    <dt>
            <a id="Contact&nbsp;Us" style="color: #14ab3f"><b>Contact Us</b></a>
            <br>
            <br>
            <dd><b>City Manager</b>
            <dd><b>P.O. Box #####</b>
            <dd><b>City</b>
            <dd><b>### ###</b>
            </dd>
    </dl>
</footer>

推荐阅读