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

我有一个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>

我创建了这个页面，在页面底部添加了复制权限div，但不知怎么的，在我的jsfiddle中，我看到我的版权div和底部页面之间有很多空白，所以我不能先放置图像，然后再将版权文本正确地放在上面

我的版权部门搞砸了，我的JSFIDLE中的版权图像也搞砸了

技术上应该是这样的：

---

我做错了什么？

波德尔是对的，你只需设置背景：灰色；而且看起来也一样

否则，需要将wrapped div设置为相对，将text元素设置为绝对。比如：

.content { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

---

注意

使图片成为背景图像

HTML:

更新：

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

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

---

您的代码中似乎有许多错误，这些错误会破坏布局。 当我修正错误时，背景部分是灰色的，其他部分是黑色的。如果这不是你的目标，那么现在就很容易改变

我没有解决所有问题，但我做了一些事情。您的页脚问题已修复。左侧边栏中似乎有一个问题，是在其他事情发生时发生的。我相信你可以用一点页边空白之类的东西来修复它，我没有仔细看

查看css中的更改。你说过你是个初学者；这是学习的好方法

快乐编码

---

编辑：修复我去掉了顶部/左侧/底部等位置，一些填充可能还需要调整，直到你满意为止

我建议你不要使用背景图片，这样可以解决你的问题。图片的意义是什么？只是给文本加背景色？是的，我想是的。。我想复制它的原样，这就是为什么我必须这么做。。先把图像放在上面，然后再把文本放在上面。这是一种非常糟糕的编码方式，而且不考虑响应性。出于学习目的，这是熟悉HTML标记的一个好方法，但您确实需要改进以尽可能少地使用绝对位置。尝试使用float创建div，并从上到下构建布局。这不是很难，但是试着看看其他网站是如何做的。你能提供JSFIDLE让我更好地理解它将如何完成吗？希望我正确理解你在寻找什么：是的，我也创建了这个。正如你所看到的，它正在偏离方向。。我们怎样才能解决这个问题呢？它必须与我的另一张图片完全相似。你现在怎么想？可能需要留余量：35px；复制权利元素是的，我添加了这一点，并创建了另一个。正如你所看到的，一切都一团糟。我怎样才能使它完全像我的另一个图像一样呢？因为它在重复图像。您可以使用背景重复：无；和背景位置：底部；，但正如我在前面的评论中提到的，您的代码是一团糟的。。对不起，我试过了，但还是不行。我认为在我所有的html上都会出现绝对宽度问题。我浑身都是。关于如何解决这个问题有什么想法吗？谢谢你的建议。在你最近的一次采访中，一切都颠倒了。从技术上讲，我的html应该是这样的，但不知怎么的，在我的JSFIDLE中，它没有显示为该图像，所以看起来我做错了什么。由于我是初学者，这将有助于我了解是否有人可以帮我举一个例子，看看我们如何准确地制作与该图像相比的小提琴。我很难解决对齐问题，使其与我的图像完全相似。这是我最近尝试复制该图像的一次尝试。这没有你对版权的修改。有什么想法吗？我该如何修复我的对齐方式，并将其与该图像完全匹配，以及修复版权？@david现在是爱尔兰时间早上6:30，我刚刚看到了你的评论，这些评论是3小时前留下的。如果您已经检查了对CSS的更正，那么您可能已经[完全]能够修复代码了。所以这不是一个代码编写服务，也不是我的全职工作。如果你接受这个答案，我可以稍后再看你的照片。建议：问一个新问题。或者从发布的答案中学习一些CSS！

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

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