用参考图像填充 DIV答案

【问题标题】：filling DIV with referenced image用参考图像填充 DIV
【发布时间】：2016-10-03 03:21:16
【问题描述】：

所以我正在尝试重新创建此网页，并且正在研究我将使用 7 次跨越导航栏的 div 样式，并且无法加载引用的图像。

我现在将发布我的代码。我在页面中使用样式进行快速访问，但完成后将使用外部样式表。

<!DOCTYPE html>
<html>
<header class="header" id="header" align="middle"> 
<img src="https://s21.postimg.org/luvg05cjb/header.jpg">
</header>

<style>



.Home {

position: absolute;
background-image: url("https://postimg.org/image/vg652px3f/");
background-size: 99px 30px;
left: 290px;
top: 234px;
text-align: center;
line-height: 30px;
width: 99px;
height: 30px;

color: black;
}
</style>

<body>


    <div class="Home">Home</div>




<h1></h1>
<p></p>

</body>
</html>

【问题讨论】：

标签： html css xhtml background-image

【解决方案1】：

您的代码有几个问题：

文档中没有head标签。
您不能简单地将<header> 标签放在<body> 元素之外。 (http://www.w3schools.com/tags/tag_header.asp)
样式标签应放在<head> 或<body> 标签内。
这不是图片网址 >> https://postimg.org/image/vg652px3f/

【讨论】：

虽然曾经有人提议允许
@MrLister 谢谢。我不知道。

【解决方案2】：

首先，您在背景图片样式中使用的是网站地址，而不是实际图片。

您可能指的图片实际上在链接中：

https://s9.postimg.org/mxwoydqkv/menubg.jpg

编辑：如果您的目标是在您的网站中显示一个网站，您应该使用 iframe。

<iframe src="https://postimg.org/image/vg652px3f/"></iframe>

【讨论】：