首頁 > web前端 > html教學 > png 里边有很多图,怎么用指定那个_html/css_WEB-ITnose

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

WBOY
發布: 2016-06-24 12:18:44
原創
1177 人瀏覽過

那些小图全部都在一个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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板