其他分享
首页 > 其他分享> > 雪碧图和PS的应用

雪碧图和PS的应用

作者:互联网

一、定义:

CSS Sprite也叫CSS精灵,CSS雪碧图,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求,所以图片越多请求越多,造成延迟的可能性越大。所以页面有许多icon时,推荐使用CSS Sprite。

二、优点:

(1)减少图片的字节。
(2)减少网页的http请求,从而大大的提高页面的性能。
(3)解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。

三、原理:

(1)需要一个设置好宽和高的容器
(2)通过background-image引入背景图片
(3)通过background-position把背景图片移动到自己需要的位置
调试方法:可以用浏览器自带的调试工具进行调试(如chrome浏览器按f12即可进行调试,慢慢移动background-position的值来达到理想的效果)

*默认显示在左上角,当只取一个值时,第二个值默认center

四、PS使用cutterman制作雪碧图的步骤:

1.打开图片(psd格式):文件-打开——>Ctrl+o——>拖拽
2.点击移动工具(自动选择图层)
3.按住Ctrl选中制作雪碧图的图层
4.点击窗口-扩展功能

五、PS制作背景透明:

1.魔棒工具选中背景
2.delate删除背景颜色
3.删除不完美再次用选框工具选中
4.delate删除背景颜色

六、PS选中目标图案:

1.对象选择工具
2.魔棒工具选中背景区域,Ctrl+shift+i 反选
3.复制图层,Ctrl+j

七、去水印:

1.仿制图章工具
2.按住alt吸取颜色
3.涂改水印

标签:PS,雪碧图,Ctrl,选中,应用,CSS,图片
来源: https://blog.csdn.net/weixin_44790641/article/details/113782945