关于CSS 把图片分块的问题

html-css09

关于CSS 把图片分块的问题,第1张

例如: .bg{ background:url(images/banner.gif) -20px -20px no-repeat}

url(images/banner.gif):导入背景图;

-20px -20px :你需要的那块背景图的坐标,这个坐标是从左上角开始计算的,并且在设置这个参数时它为负数(这个为啥子我为负数,我也不太清楚);比如我现在侧得得坐标是:x轴:20 、y轴:10 ,那么就应该是.bg{ background:url(images/banner.gif) -20px -10px };

no-repeat:背景不平铺;

太久没用的东西,偶然用到,竟然忘记了,所以记录一下,加深一下印象

图片和行内块元素默认底线会和父级盒子的基线对齐,因此就会产生白色缝隙。

1.用vertical-align:middle | top| bottom等,让图片不和基线对齐。

上面3中对齐方式都可以

vertical-align不影响块级元素中的内容对齐,它只针对于行内元素或者行内块元素,特别是行内块元素, 通常用来控制图片/表单与文字的对齐。

2.将img通过display: block转为块级元素。

转为块级元素之后,就不存在和父级盒子基线对齐的问题了。