将背景图片添加到<div>元素

是否有可能使一个<div>元素包含一个背景图像,如果是的话,我将如何去做这个?

你是这个意思?

 <style type="text/css"> .bgimg { background-image: url('..http://img.dovov.comdivbg.png'); } </style> ... <div class="bgimg"> div with background </div> 

你可以使用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>


其中

  • 颜色是hex颜色或X11颜色中的一种颜色
  • path是图像的path
  • 其他人喜欢职位,附件

background CSS属性是以这种语法连接所有的background-xxx部分:

背景背景颜色 背景图像 背景重复 背景附件 背景位置 ;

来源:w3fools

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

使用像..

 <div style="background-image: url(..http://img.dovov.comtest-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(..http://img.dovov.comtest-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div> 
 <div class="foo">Foo Bar</div> 

并在你的CSS文件中:

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

您可以简单地添加一个img src属性与id:

 <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; }