网页怎么调用png里的小图的？打开一张PNG图发现有是很多小图显示的时候是单独显示小图的.

发布网友 发布时间：2022-04-20 22:35

我来回答

共2个回答

懂视网 时间：2022-04-21 02:56

回复讨论(解决方案)

background:url() 0px 0px; 这后面的两个数值 就是 用来定位图片的。比如 现在 0 0 默认的就是左上角的那个图片 100% 100% 就是 右下角那个。顺序是 第一个数字 是左右 后一个 上 下。

css里设置background-position
比如要的图标x方向偏移300px，y方向偏移20px，就这样

background-position: -300px -20px;

CSS魔法技术可以满足你的要求，详情见： http://www.scriptlover.com/static/374-css-sprite

用 clip:rect(上、右、下、左)
或 background-Position:x y;定位 +width,height

background:url() 0px 0px; 这后面的两个数值 就是 用来定位图片的。比如 现在 0 0 默认的就是左上角的那个图片 100% 100% 就是 右下角那个。顺序是 第一个数字 是左右 后一个 上 下。

那么我要用photoshop打开图片，查出每个图片的位置了。 png是不是用ps来弄？

CSS魔法技术可以满足你的要求，详情见：http://www.scriptlover.com/static/374-css-sprite

里边具体例子的教材，都是英文的了，大篇大篇的看起来很费劲啊

background-position: -300px -20px;

background-position: -300px -20px;

引用那张图片写在什么地方？

css里设置background-position
比如要的图标x方向偏移300px，y方向偏移20px，就这样
CSS code?1background-position: -300px -20px;

找到个工具可以直接生产css

Css Sprite Tools

http://www.onlinedown.net/soft/100396.htm

哈哈 分享下

引用 8 楼 luju5 的回复:background-position: -300px -20px;

引用那张图片写在什么地方？

background: url(${contextPath}/skins/default/Waring/round_bg.gif) no-repeat;

url

热心网友 时间：2022-04-21 00:04