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

html-css024

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>

用background-position: 给背景定位

.img{ background-image:url(bj.jpg)width:79px height:30background-position: 00}显示绿色背景

.img{ background-image:url(bj.jpg)width:79px height:30background-position: 0 30}显示黄色背景

下面这样做应该可以吧

-------------------------------————————————————————————

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>无标题文档</title>

<style type="text/css">

<!--

body,td,th {

font-size: 12px

}

.img{ background-image:url(bj.jpg)width:79px height:30}

.01{background-position: 0 0}

.02{background-position: 0 30}

-->

</style></head>

<body>

<div class="img 01"></div>

<div class="img 02"></div>

</body>

</html>

用绝对定位..

background-position: -186px -22px 定位背景的具体位置..

比如你这个整体图, 是一张背景 , 你就可以通过 background-position:XX

来定位 这个张背景图的具体显示那块内容.. 可以去试试..网上很多素材

光靠字面理解很难，最好自己动手实践

方法一：

<div style="width:600pxheight:200pxbackground:url(路径图片中间部分切成1px宽) repeat-x">

<img src="路径图片左圆角" style="float:left"/>

<img src="路径图片右圆角" style="float:right"/>

</div>

方法二：

<div style="width:600pxheight:200pxbackground:url(图片中间部分切成1px宽)">

<div style="background:url(路径图片左圆角) no-repeatfloat:leftwidth:左圆角宽pxheight:左圆角高px">

<div style="background:url(路径图片右圆角) no-repeatfloat:rightwidth:右圆角宽pxheight:右圆角高px">

</div>

注：切图时，圆角图片一定要连着圆角外的白色部分一起切，中间填充部分可以只切1px宽，实际高度进行填充