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-rights div搞砸了，版权图片也搞砸了我的jsfiddle。

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

我做错了什么？

Answer 1

您的代码中似乎存在许多错误，这些错误会导致布局失效。当我修改错误时，background部分为灰色，而其他部分为黑色。如果这不是你的目标，那么现在应该很容易改变。

我没有解决所有问题，但我做了一些事情。无论如何，您的footer问题已得到修复。左侧边栏似乎有问题，而其他东西落到了位置。我确定你可以用一点margin-top或其他东西修复它，我没有仔细看它。

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

Fiddle

快乐的编码！

编辑：Yaha!（修复我从顶部/左/底等位置和一些填充）仍然可能需要调整，直到你对它感到高兴.. Preview

Answer 2

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

否则，您需要将包装的div设置为relative，将text设置为absolute。类似的东西：

.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;
}

图像上的版权文字在html中搞砸了

3 个答案: