Html 向 <div> 元素添加背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5604859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a background image to a <div> element
提问by Sandeep
Is it possible to make a <div>element contain a background image, and if so, how would I go about doing this?
是否可以使<div>元素包含背景图像，如果是这样，我将如何执行此操作？
回答by phoibos
You mean this?
你是这个意思？
<style type="text/css">
.bgimg {
background-image: url('../images/divbg.png');
}
</style>
...
<div class="bgimg">
div with background
</div>
回答by Robik
You can do that using CSS's backgroundpropieties. There are few ways to do it:
您可以使用 CSS 的background属性来做到这一点。有几种方法可以做到：
By ID
通过身
HTML:<div id="div-with-bg"></div>
HTML：<div id="div-with-bg"></div>
CSS:
CSS:
#div-with-bg
{
background: color url('path') others;
}
By Class
按班级
HTML:<div class="div-with-bg"></div>
HTML：<div class="div-with-bg"></div>
CSS:
CSS:
.div-with-bg
{
background: color url('path') others;
}
In HTML (which is evil)
在 HTML 中（这是邪恶的）
HTML:<div style="background: color url('path')"></div>
HTML：<div style="background: color url('path')"></div>
Where:
哪里：
- coloris color in hex or one from X11 Colors
- pathis path to the image
- otherslike position, attachament
- 颜色是十六进制颜色或X11 颜色中的一种
- 路径是图像的路径
- 其他喜欢位置，依恋
backgroundCSS Property is a connection of all background-xxx propieties in that syntax:
backgroundCSS 属性是该语法中所有 background-xxx 属性的连接：
background: background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position;
背景： 背景颜色背景图像背景重复背景附件背景位置；
Source: w3schools
资料来源：w3schools
回答by Flash
Yes:
是：
<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>
回答by jegadeesh
Use this style to get a centered background image without repeat.
使用此样式可在不重复的情况下获得居中的背景图像。
.bgImgCenter{
background-image: url('imagePath');
background-repeat: no-repeat;
background-position: center;
position: relative;
}
In HTML, set this style for your div:
在 HTML 中，为您的 div 设置此样式：
<div class="bgImgCenter"></div>
回答by Anand Thangappan
Use like ..
使用像..
<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>
回答by Adam Sandler
You can simply add an img src Attribute with id:
您可以简单地添加一个带有 id 的 img src 属性：
<body>
<img id="backgroundimage" src="bgimage.jpg" border="0" alt="">
</body>
and in your CSS file (stretch background):
并在您的 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;
}
回答by Darin Dimitrov
<div class="foo">Foo Bar</div>
and in your CSS file:
并在您的 CSS 文件中：
.foo {
background-image: url("images/foo.png");
}
回答by Guvaliour
<div id="imgg">Example to have Background Image</div>
We need to Add the below content in Style tag:
我们需要在 Style 标签中添加以下内容：
.imgg(
background-image: url('C:\Users\ajai\Desktop.jpg');
)
回答by Winston Brown
For the most part, the method is the same as setting the whole body
大多数情况下，方法与设置全身相同
.divi{
background-image: url('path');
}
</style>
<div class="divi"></div>
