在边距内添加背景图片答案

【问题标题】：Adding background picture inside margin在边距内添加背景图片
【发布时间】：2016-06-23 17:34:25
【问题描述】：

我是制作html的初学者。我才上高中。

我们的任务是制作一个网站，我希望它看起来像下面的图片。我们只允许使用记事本创建它，不允许使用应用程序。（如 Adobe Dreamweaver）我无法将图片放在背景中（参考图片，带箭头的红色部分）。我还想知道如何插入图片以及如何在图片周围换行。如何在记事本中完成此操作？

提前致谢！

HERE'S THE PICTURE

【问题讨论】：

标签： html image notepad++ border margin

【解决方案1】：

请使用这个：

body  {
    background-image: url("paper.gif");
}

用你自己的背景图片替换 paper.gif

【讨论】：

对不起，这不是我想要的……澄清一下，我给出的图片中的红色部分是我想要放置图片的区域，而不是整个区域……绿色区域将有另一张图片或简单的背景颜色...
嗨锅，你能把你的代码贴出来，让我看看。:)

【解决方案2】：

有几种方法可以做到这一点。首先，如果你想让一个图像到达左边的红色和右边的红色，你必须这样做：

<div class="mainDiv">
   <div class="greenDiv">
      And here goes the content of your webiste
   </div>
</div>

将图像放在红色上的 css：

.mainDiv {
  background-image: url("folder/file.png");
  background-repeat: no-repeat; //if you dont want it to be reppeated.
}

如果你不熟悉css，你可以使用它，在div里面mainDiv，像这样：<div class="mainDiv" style="background-image:url('folder/file.png'); background-repeat:no-repeat;"></div>

但是，如果您想为每个红色使用一个图像，则必须将它们分隔在两个 div 中，如下所示：

<div class="leftRed" style="background-image:url('folder/img1.png'); background-repeat:no-repeat;"></div>
<div class="greenDiv"></div>
<div class="rightRed" style="background-image:url('folder/img2.png'); background-repeat:no-repeat;"></div>

【讨论】：

感谢您的回答！我在哪里放置'div'？我可以在整个 html 中的任何位置插入它吗？
div 应该在你的标签内。像这样：
这是我复制时的样子：dropbox.com/s/dt7px0g8u15xsbn/%3Bikaj%2Csmnxfd.png?dl=0
选择我上面写的一个例子的代码，放入文本编辑器（如记事本）并将文档保存为.html（name.html）。在此之后，当您达到示例的结果时，我们可以在您的网站上继续
好的，现在我们离你想要的更近了，对吧？将您的代码（
直到

some info

... 放在 greenDiv 标记内。在此之后，您可以提高 greenDiv 的大小，将其值更改为 width:400px; 到某个值你想拥有.. 800px（示例）

【解决方案3】：

我不知道从哪里开始，但你有很多东西要学（这是一件好事！）。我清理了您的代码并在 body 元素中添加了一个 background-image，因为这就是您想要实现的目标。

background-image: url('http://i.imgur.com/AzeiaRY.jpg');

不推荐使用align="center。不要使用它来获得有效的标记。请使用<head> 中的<style> 来使用text-align: center; 或更好地使用an external stylesheet。它是对另一个文件的引用，用于将样式添加到文档的body。

您可以在Mozilla Developer Network 找到有关开始使用 CSS？ 的更多信息。

<html>

<head>
<title> My First HTML File</title>

<style type="text/css">

body { 
background-image: url('http://i.imgur.com/AzeiaRY.jpg'); 
border: 30px solid red;
color: #fff; /*colour of text*/
margin-left: 50px;
margin-right: 50px;
font-style: normal;
font-family: Gisha, Verdana, Lucida Console, Helvetica;
font-size: 12pt;
}


</style>



</head>

<body>

<h4>Home Page</h4>
<hr>

<br>

<p style="text-align: center;">
<a href="url" style="color:white"> Home</a> | 
<a href="url" style="text-decoration:none; color:white">About </a>| 
<a href="url" style="text-decoration:none; color:white">Portfolio</a> | 
<a href="url" style="text-decoration:none; color:white">Contact </a>
</p>



<br><br>
<h2  style="text-align: center;"> WELCOME to my website!</h2>


<p> some info </p>



<br>
<br>


</body>

</html>

【讨论】：

谢谢！有用！只是一件事，即使我更改了指向目录路径的链接，背景图像也不会出现......
@potpotpot 是否与其余文件位于同一文件夹中？目录结构是什么？
你在说什么其他文件？
你的图片和index.html在同一个文件夹里吗？
不是...我应该将它们放在一个文件夹中吗？

直到