CSS定位图片中的元素

html-css016

CSS定位图片中的元素,第1张

这个并不复杂,只是每个调用不同部位的地方都要单独定义一个类而已

background:url(images/test.jpg) 12px 5px no-repeat

12px的意思是背景图往右偏移12像素,5px是往下偏移5像素,如果不定义,默认值等同0px 0px

你如果要用新浪的方式调的话,要考虑当调用背景某一部位时,防止不该出现的元素出现,意思就是元素的间距要大于你定义的盒子的大小,多说无益,实践才是真理

CSS显示一个大图片中的多个小图标,主要是用background-position这个属性来控制的。

首先先将放置背景小图标的元素的大小设置成图片里图标的实际大小,用width和height设置,然后用background-image把背景图片放进去,比如:

.showImage{

background-image: url(9pic2.jpg)

width: 100px

height: 100px

}

然后用background-position属性调整背景图片的位置,它有两个值分别表示背景图片沿着x和y轴移动的距离。

扩展资料

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

选择器就是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成,属性是设置的样式属性(style attribute),每个属性都有一个值,属性和值用冒号分隔。CSS 声明总是以分号 结束,声明组以大括号 {...} 括起来。为了让 CSS 可读性更强,可以每行只描述一个属性。

CSS 注释是用来解释代码,并且可以随意编辑,浏览器会忽略它。CSS注释以 "/*" 开始,以 "*/" 结束。

当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。CSS 创建样式表有三种方法:内联样式、内部样式、外部样式。

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

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

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

上面3中对齐方式都可以

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

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

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