淘先锋技术网

首页 1 2 3 4 5 6 7

CSS3 提供了很多图片处理的新功能,其中一项是使图片紧贴,也就是没有间隔地贴在一起。

img {
display: block; /*将图片设置为块级元素*/
float: left; /*让图片向左浮动*/
margin-right:-4px; /*设置图片间距为 -4px,从而紧贴*/
}

代码中的display: block;把图片变成块级元素,这样它就会在自己的行里,而不是与前一个元素换行。接着,float: left;让图片向左浮动,这样它可以与前面的图片拼成一行。最后,margin-right: -4px;是将图片之间的间距设置为负值。这个值一般设置为图片的宽度的负数,这样就可以实现紧贴的效果。

需要注意的是,如果图片的大小是不同的,使用margin-right没有效果,可以使用CSS3 的nth-child(n)伪类来对每个图片单独设置样式。

img:nth-child(1) {
margin-right: -4px;
}
img:nth-child(2) {
margin-right: -6px;
}
img:nth-child(3) {
margin-right: -2px;
}

以上是一个简单的紧贴图片的方法,使用它可以使图片在页面上更美观。