将背景图片添加到<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; }