如何在 <div> 标签 (html) 中将图像设置为背景

Question

所以我有一个正在开发的网站，我需要在 html 中的 <div> 标记内有一个图像作为背景，这是我目前拥有的代码：

<div id="menu" style="background-color:ffd700;float:left;height:600px;width:250;">

Answer 1

<div id="menu" style="background: #FFD700 url('myImage.jpg');">

如果查看者的浏览器正在使用图像拦截器、无法查看图像或图像不存在，则将使用十六进制颜色值。 URL 是图像的路径（可以是相对路径或绝对路径。

更多信息：CSS Basics: Background Properties

附：尽管此代码块确实有效，但设置内联样式是一种不好的做法。您应该始终使用外部样式表将样式与内容分开。

Answer 2

首先，使用内联样式并不是很好的做法。由于您的 div 标签已经有一个 id，您可以在样式表中将样式应用于该 id。这样做的代码如下所示：

#menu {
    background: url("path_to_your_image") #ffd700;
    float: left;
    height: 600px;
    width: 250px;
}

设置背景图片的部分是background: url("path_to_your_image")#ffd700应用颜色。但是，由于默认情况下背景图像设置为重复，除非您指定背景不应重复，否则您将看不到颜色。您可以通过将上面的行更改为 background: url("path_to_your_image") no-repeat #ffd700 来做到这一点。

当然，如果您不想使用样式表，同样适用。您只需将该行放在 HTML 标记的样式属性中。