图像上的版权文本在HTML中变得混乱

Question

我有一个HTML，我需要在页面底部添加版权文本，但我需要在另一张图像上添加该文本。这是我添加的div：

<div class="copy-rights">
    <img src="https://s30.postimg.org/ws4b9bff5/copyrights.png" />
    <p>
        ©THE NORTHMAN COMPANY . 2017 . ALL RIGHTS RESERVED
    </p>
</div>

我创建了这个 jsfiddle，其中我在页面底部添加了copy-rights div，但不知何故，在我的 jsfiddle 中，我看到我的copyrights div和底部页面之间有很多空白，所以我无法先放置图像，然后正确在其顶部放置版权文本。

我的copy-rightsdiv 搞砸了，版权图像在我的 jsfiddle 中也搞砸了。

从技术上讲，它应该是这样的：https://s12.postimg.org/s70kwke59/copyright-image.png

我做错了什么？

Answer 1

您的代码中似乎有很多错误，这些错误会抛弃布局。当我修改错误时，background部分是灰色的，其他部分是黑色的。如果这不是您的目标，那么现在应该很容易改变。

我没有解决所有问题，但我做了一些事情。无论如何，您的footer问题已解决。左侧边栏中似乎存在一个问题，这是在其他事情到位时发生的。我相信你可以用一些margin-top或其他东西来修复它，我没有仔细看它。

请查看 css 中的更改。你说你是初学者;这是一种很好的学习方式。

小提琴

祝您编码愉快！

编辑：雅哈！(修复我删除了顶部/左侧/底部等位置和一些填充(仍然可能需要调整，直到您对它感到满意。预览

Answer 2

> Paudel是对的，你可以设置背景：灰色;它看起来是一样的。

否则，您需要将包装的div 设置为相对的，并将文本元素设置为绝对的。像这样：

.content { 
   position: relative; 
   width: 100%; /* for IE 6 */
}
h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

问候

Answer 3

将图片设为背景图像

.HTML：

<div class="copy-rights"> 
  <p>
    ©THE NORTHMAN COMPANY . 2017 . ALL RIGHTS RESERVED 
  </p>
</div>

.CSS：

.copy-rights {
  background-image: url('https://s30.postimg.org/ws4b9bff5/copyrights.png');
}

更新：

由于图像只是一个灰色区域，因此也可以应用背景色：

.copy-rights {
  background-color: grey;
}