日期:2014-05-16  浏览次数:20714 次

html 多张背景图片并存

我们在制作网页的时候,一般一个DIV放一张图片进去。但是如果放多张呢?答案是可以的,但是就目前浏览器来说只有FF和C支持,IE不支持。

div{

background: url("right.png") top left no-repeat, url(error.png) bottom left no-repeat;//注意这个必须写在一起,有多少张图片,就写多少。每个url后面的top bottom left right 位置是对该背景图片的一个定位。但是只是大概的定位,不能进行精确定位

?

width: 1000px;

height: 1000px;

border: 1px solid #000000;

?

background-size:100px 200px;//这个是对所有的背景图片尺寸进行控制的,注意是所有的背景图片

background-position:8px 95px; //对图片所在DIV的位置进行控制,也是所有的背景图片

}

?

?

但是如果放入多张怎么才能对这些放入的图片单个精确定位呢?看下面的CSS代码。

div{

border: 1px solid #000000;

background:url("right.png") 0px 0px no-repeat,url("error.png") 0px 300px no-repeat;//前面 所说的url后面的定位是模糊的,不精确的。可以直接在url后面跟上像素,这个可以指定每个背景图片所在div的准确位置。第一个位置是离上边距的距离;第二个距离是离左边距的距离。

height: 800px;

width: 1000px;

}