css 背景定位切图技巧的问题

html-css011

css 背景定位切图技巧的问题,第1张

我这人也确实很少看教程,没有什么好网站推荐给你,说说我的一些新的吧。

先说学习:

1.看,看看用这项技术的网站的样式表是怎么写的,把图片存下来,看看都有什么图片放在了一起

2.做,看了之后就要尝试自己做,眼过千遍,不如手过一遍,可以自己试着做一下自己的网站,可以把你看的网站的效果做出来。

说下经验:

1.什么图片整合在一起。

(1)一般情况下,背景repeat-x的放在一起,块背景(不会重复的背景)放在一起,这些是和实现效果挂钩的,背景x轴重复的放在一起,是因为会重复显示,如果和其他图片放在一起,那么重复时就会把它右侧的所有内容都重复显示,所以x轴或者有需要的话y轴重复的背景需要单独放在一起;块背景即为不重复的背景,这类图片因为不重复,所以把这些图片放在一起,不用担心上下左右的地方会显示出来。其实一句话,重复的背景放在一起,不重复的背景放在一起,就这么简单。

(2)坐标定位,其实除了麻烦之外没啥特别难的,我用的方法不知道是不是最好的,但是我觉得挺好用的,把所有图片用photoshop整合到一张图片里面后,先确定你要用的那个图片背景,然后用方形选区工具沿着此图片的上边一直拖到整张图片上边形成一个选区,选择背景图层并ctrl+c复制,然后点新建,会有一个高度,这个高度就是图片y的坐标;同理,沿着此图片的左边到整个图片的左边画一个选区再复制,然后新建,宽度就是x的坐标,这样得出的坐标是绝对准确的,如果你的整合图片做的好,确定坐标很容易。

任何人都有自己的习惯,自己的习惯都是从实践中摸索出来的,我的方法未必是最好的,是最适合你的,只是一块砖,能不能引出你的玉,就需要你不断的自己实践并积累经验,最后找到最适合自己的方法。

举个例子鼠标没有经过的时候 显示红色图片 鼠标经过的时候显示黑色图片 图片宽30像素 高10像素 那么把红黑放到一起 那就是 宽30像素 高20像素 如果定义A那么就是.a:{display:blockheight:10pxwidth:30pxoverflow:hiddenbackground:url(图片地址) 0 0 no-repeat} .a:hover {background:url(图片地址) 0 -10px no-repeat}

要调整背景图的渲染尺寸,需要用到background-size这个样式规则,但这是CSS3新增的,所以目前暂时没有全兼容的解决方案。

哦,这个意思,那么如果你贴背景图的容器高度与背景图那几个logo一致,就采用纵向排列图片,垂直定位的方式;如果容器宽高都比logo尺寸大,那就没办法了,再嵌入一个小容器专门显示这个图标吧。