乖兔博客

乖兔 > CMS系统 > HTML > 使用img标签做div的背景图片

使用img标签做div的背景图片

乖兔 更新于: 2020-02-27 分类:HTML

一般来讲,制作网页模板的时候,习惯用CSS里面的background来定义div元素的背景。这是最通用最便捷的方法,并且将ccs代码写到css样式表的单独文件里,还可以简化html代码,使网页代码更加简洁。

img图片标签用作div背景图.jpg

但是,有些时候会有一些图书需求。比如当元素的背景图片需要变动的图片的时候(非gif动图),就是说这个背景图片是随着内容而变化的而非一张固定的图片。css文件就没法实现或者很难实现了。当然,在html代码里插入style标签然后在标签里插入变量图片也是一个方法,但是这样做并不是最优解.

一方面,这种写法让页面代码显得相对混乱。另一方面,对于SEO而言并不那么友好,因为搜索引擎优化中一般的定义是,搜索引擎的植株是不读取css内容的,所以若果把div背景变成一个img标签,就可以完美的实现这个需求。简化了代码的同时,还帮助了SEO的工作。

使用img标签做div的背景图片实例:

<!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做出修改即可。

打赏