将背景图像添加到 <div> 元素答案

【问题标题】：Adding a background image to a <div> element将背景图像添加到 <div> 元素
【发布时间】：2020-05-28 09:05:30
【问题描述】：

是否可以让<div> 元素包含背景图片，如果可以，我将如何做？

【问题讨论】：

标签： html

【解决方案1】：

<div id="image">Example to have Background Image</div>

我们需要在Style标签中添加如下内容：

.image {
  background-image: url('C:\Users\ajai\Desktop\10.jpg');
}

【讨论】：

您的本地路径：C:\Users\ajai\Desktop\10.jpg 永远无法在线工作 ;)
只是为了摇晃我给了这条路

【解决方案2】：

大部分方法和设置全身是一样的

.divi{
    background-image: url('path');
}

</style>

<div class="divi"></div>

【讨论】：

【解决方案3】：

使用此样式获得居中的背景图像，不重复。

.bgImgCenter{
    background-image: url('imagePath');
    background-repeat: no-repeat;
    background-position: center; 
    position: relative;
}

在 HTML 中，为您的 div 设置此样式：

<div class="bgImgCenter"></div>

【讨论】：

【解决方案4】：

您可以使用 CSS 的 background 属性来做到这一点。有几种方法可以做到：

按 ID

HTML： <div id="div-with-bg"></div>

CSS：

#div-with-bg
{
    background: color url('path') others;
}

按类别

HTML： <div class="div-with-bg"></div>

CSS：

.div-with-bg
{
    background: color url('path') others;
}

在 HTML 中（这是邪恶的）

HTML： <div style="background: color url('path')"></div>

在哪里：

color 是十六进制颜色或X11 Colors 中的一种颜色
path 是图片的路径
其他喜欢位置、附件

background CSS 属性是该语法中所有 background-xxx 属性的连接：

背景： 背景色 背景图片 背景重复 背景附件 背景位置;

来源：w3schools

【讨论】：

我想使用 HTML 方法，但是否可以仅使用该方法添加 2 个位置不同的图像。我知道可以做类似的事情：background-image: url("image.jpg"), url("image2");但是这样做，两张图片会在同一个地方，有点“重叠”，我想为它们设置不同的位置。

【解决方案5】：

您可以简单地添加一个带有 id 的 img src 属性：

<body>
<img id="backgroundimage" src="bgimage.jpg" border="0" alt="">
</body>

在您的 CSS 文件中（拉伸背景）：

#backgroundimage
{
   height: auto;
   left: 0;
   margin: 0;
   min-height: 100%;
   min-width: 674px;
   padding: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: -1;
}

【讨论】：

问题是关于向 div 添加背景元素，而不是添加单独的 img 属性，因此这不能提供问题的答案。
虽然这个解决方案不能正确回答这个问题，但它确实让我对我面临的另一个问题有了一个想法，因此我表示感谢。

【解决方案6】：

你是说这个吗？

<style type="text/css">
.bgimg {
    background-image: url('../images/divbg.png');
}
</style>

...

<div class="bgimg">
    div with background
</div>

【讨论】：

我可以设置不可重复吗？
是：背景重复：不重复； w3schools.com/cssref/pr_background-repeat.asp

【解决方案7】：

是：

<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>

【讨论】：

【解决方案8】：

像..一样使用

<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>

【讨论】：

路径应该是单引号吧？？

【解决方案9】：

<div class="foo">Foo Bar</div>

在您的 CSS 文件中：

.foo {
    background-image: url("images/foo.png");
}

【讨论】：