一般来讲,制作网页模板的时候,习惯用CSS里面的background来定义div元素的背景。这是最通用最便捷的方法,并且将ccs代码写到css样式表的单独文件里,还可以简化html代码,使网页代码更加简洁。
但是,有些时候会有一些图书需求。比如当元素的背景图片需要变动的图片的时候(非gif动图),就是说这个背景图片是随着内容而变化的而非一张固定的图片。css文件就没法实现或者很难实现了。当然,在html代码里插入style标签然后在标签里插入变量图片也是一个方法,但是这样做并不是最优解.
一方面,这种写法让页面代码显得相对混乱。另一方面,对于SEO而言并不那么友好,因为搜索引擎优化中一般的定义是,搜索引擎的植株是不读取css内容的,所以若果把div背景变成一个img标签,就可以完美的实现这个需求。简化了代码的同时,还帮助了SEO的工作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .div1{ position:relative; margin:0 auto; width:500px; height:500px; overflow:hidden; } .div2{ padding-left:10px; } img{ position:absolute; z-index:-1; min-width:100%!important; min-height:100%!important; } </style> </head> <body> <div class="div1"> <img src="0.jpg"/> <div class="div2"> 这是一段编辑好的文字用来展示一下背景图片的效果<br/> 我是第二行<br/> 这里成功实现了用img标签做div背景图片<br/> </div> </div> </body> </html>
这是个基础例子,具体需要的样式自己配合自己的css做出修改即可。