欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

png 里边有很多图,怎么用指定那个_html/css_WEB-ITnose

程序员文章站 2022-04-20 11:42:19
...
那些小图全部都在一个png图片上了
比如我想用word的那个图该怎么弄? 用excel那个图呢?


回复讨论(解决方案)

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