css怎么做才能只显示图片的一部分

html-css011

css怎么做才能只显示图片的一部分,第1张

CSS Sprite

需要知道大图的网地,小图标在图上的位置偏移(写进css里的background-position要加负号),和大小。

<style>

.icon {

  background:url(background.png)

  background-repeat:no-repeat

  background-position:-25px -374px

  height:16px

  width:24px

}

</style>

<div class=".icon"></div>

你的背景图片被你定位了

no-repeat 0 -60px

不重复 X坐标0 Y坐标-60 图片就被定位到不同的位置了

如果你的图片直接用左上角开始显示,那就改为0 0 就好了

1、控制背景重复:

如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。

属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。

默认地,背景图像将从一个元素的左上角开始举例如下:

body

{

background-image: url(/i/eg_bg_03.gif)

background-repeat: repeat-y

}

2、控制背景位置

可以利用 background-position 属性改变图像在背景中的位置。

下面的例子在 body 元素中将一个背景图像居中放置:

body

{

background-image:url('/i/eg_bg_03.gif')

background-repeat:no-repeat

background-position:center

}

首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。