CSS图片问题字典,问题集
总结一下在前端遇到的一些图片不能显示,图片切图等相关问题,其实都是一些低级错误,但在工作中里遇上后,一着急就什么都忘记了,还把一些常用的工具都记下,方便以后使用。
1.css跟图片有依赖关系,就是说css的位置跟图片的路径要分清楚,要不然图片名字对了,css也没有语法错误,但是图片就是显示不出来。
比如你的目录是这样的,
css放在html文件里面,引入图片就是../images/1.jpg
而不是从html文件的目录去找,assets/images/1.jpg
2.如果你的背景图片是线上的地址,如果显示不出来,请加上引号,这样才能正确显示。
比如这样。可能显示不出来
background: url(http://www.baidu.com/1.jpg) no-repeat;
加上引号
background: url("http://www.baidu.com/1.jpg") no-repeat;
3.雪碧图合并
http://csssprites.com/
http://www.cnblogs.com/joyho/articles/3715260.html
4.切图
http://www.cnblogs.com/jingwhale/p/4396235.html
5.把黑色的Png图片还原
步骤:
1.新建3个图层
2.切换到通道选项卡,按住Ctrl点击红色通道,左侧会自动选中红色通道
3.切换到图层选项卡,点击一下图层1,点击下面类似阴阳的图标,选择纯色
4.打开纯色填充的界面,
这里注意,刚才我们选择的是红色通道,这里填充红色,绿色填充绿色,蓝色填充蓝色
R=Red红色、B=Blue蓝色、G=Green绿色
5.然后点图层1前面的小眼睛,熄灭它,点击一下其他图层,切换到通道选项卡
6.如此类推,然后选择“滤色”
7.然后透明的Png图片又出现了
6.怎么把有阴影的图片给切下来,比如有阴影的按钮,阴影的背景图?
要找到按钮所在的图层,可能是一个组可能是一个智能对象,把图层给合并了,然后你在按住ctrl键的时候,就能把之前选不中的阴影都给选中了,然后就可以给切下来了。