A. CSS雪碧图的按钮，中间部分背景平铺怎么写
background-repeat:repeat;//背景重复
background-size:100%;//背景图大小，图片会拉伸呈现
B. web前端什么是雪碧图
雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好。
使用雪碧图的优点有以下几点：
将多张图片合并到一张图片中，可以减小图片的总大小
将多张图片合并到一张图片后，只需一次网络请求就可以将所需的资源全部下载，减小建立连接的消耗，在移动端尤为明显
雪碧图的制作与使用方法：
使用图像编辑软件如Photoshop将多张图放到同一个图层并导出或使用自动化构建工具自动拼接合并后的图片
引用图片时，图片地址为合并后的图片地址，通过background-position调整背景图的位置，并通过容器的宽高共同作用，来选出所需的图片
注意：
在HTTP2中，已经不需要考虑减少请求数，故雪碧图在HTTP2中优化性能的意义已经不大
C. 如何给制作好的css雪碧图里面添加背景颜色
一般情况下雪碧图是用在背景里面的（background）,然后通过background-position来调整位置的，那么颜色可以是backround-color来控制，简写就比如：
background:#f00 url('xbt.png') -100px -100px no-repeat;
//这儿假设雪碧图是xbt.png，路径也是正确的，那么你就可以根绝上面的格式来引用雪碧图；这句话的意思是 红色背景（#f00）、引入图片（url('xbt.png')）、向上 向左 各偏移-100px（ -100px -100px ）、图片不复制（no-repeat）;
D. 如何规划站点的雪碧图
一般会有哪几种类型的雪碧图？雪碧图的尺寸该设置多大？如何排列？雪碧图在站点中如何分布？是否曾经烦恼过以上几点问题？带着上面几点问题，我们一起来探讨站点的雪碧图该如何规划比较合理。首先让我们回忆一下，以前切页面时，会用到哪些类型的素材图？我努力的想…努力的想啊…大概有：按钮、图标、其它固定尺寸背景图、横竖平铺背景图、横铺背景图、竖铺背景图、左右自适应背景图、上下自适应背景图、颜色鲜艳且尺寸较大的背景图。好像有点乱，让我们分下类。按雪碧图使用的作用域可分为：跨项目通用、全局、栏目级、页面级按雪碧图实现方式可分为：固定尺寸雪碧图、横铺雪碧图、竖铺雪碧图(比较少用)、横竖平铺背景图(比较少用)�0�2那么，再把我们回想的素材图归下类：按作用域：这些素材在不同站点都有可能出现在不同作用域中按实现方式：固定尺寸雪碧图：按钮、图标、其它固定尺寸背景图、颜色鲜艳且尺寸较大的背景图横铺雪碧图：横铺背景图、左右自适应背景图(不使用九宫格的实现方式)竖铺雪碧图：竖铺背景图、上下自适应背景图(不使用九宫格的实现方式)横竖平铺背景图：这种图不能合成雪碧图，一般用于网页背景花纹，大部分站点比较少出现最后，从站点的可实现性上考虑，我们该做多少张雪碧图？请看下面这张表：从表中可以分析出，一个页面的背景图的请求数为：看到最最多的情况，是不是震惊了？呵呵，其实很少会发生全部用的情况，根据页面实际情况组合使用，请求的个数不会很多，跟第一张图例的背景图请求数相比，规划清晰很多，请求数也减少很多了。这些图该如何切、如何分布、命名，有没什么讲究？以下是我个人的观点和建议：�0�2横铺图宽度使用20px, 使用1px宽度横铺会有渲染性能问题，竖铺同理。我就不详细说明了，网上搜索，有相关示例。固定尺寸的雪碧图一般可设定为宽度是网页宽度的一半，高度随图片内容增长。因为切图前你可能不确定用多大尺寸，我的见解是，到切图后期你可能不需要单独用一张repeat-x.png的图放左右自适应的背景图，多数情况我们会用2个标签采用滑动门的方式实现左右自适应的背景，而页面宽度的一半即可实现最大宽度的左右自适应背景，那么这时你可以把左右自适应的背景放进这张雪碧图中了拼合图片时固定尺寸的图与图之间相隔1像素，避免浏览器放大时，尺寸多计算1像素时可见到临近的图片栏目级雪碧图的名称按栏目级目录名命名，页面级雪碧图的名称按页面名称命名，组件类和皮肤类雪碧图同理，其它的可按表中的名称命名，这样方便区分和后期管理跨项目通用的组件或某个组件的图片内容较多、修改频繁，可以独立出一张组件图，按组件名命名，方便管理如果站点的全局图标比较多，可以考虑将图标单独做一张雪碧图建议图标使用一个新标签实现，而不是直接用有内容的那个标签设定图标背景，这样你需要给雪碧图图标与图标之间多留一些间距，另外遇到不同行高的时候，为了让图标背景垂直居中，还需要重新设定background-position，这种实现方式不利纳入全局样式以上是个人的一些经验和观点，仅供参考，大家对雪碧图的规划有什么好的建议和看法，欢迎留言一起探讨。
E. CSS雪碧的原理
CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。
一个简单的例子：
一个链接用CSS做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，a:link，a:hover，a:active。
<a class=button href=#>链接</a>
加入右侧的图片为：200px×65px的三个按钮图拼合而成的图片button.png，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用CSS进行定义。
a {
display:block; width:200px; height:65px; line-height:65px; /*定义状态*/
text-indent:-2015px; /*隐藏文字*/
background-image:url(button.png); /*定义背景图片*/
background-position:0 0; /*定义链接的普通状态，此时图像显示的是顶上的部分*/}
a:hover {background-position:0 -66px; /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/}
a:active {background-position:0 -132px; /*定义链接的普通状态，此时显示的是底部的部分，向下取负值*/}
初学的朋友可以试试效果。
而更多的CSS雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值，如：background:url(nav.png) -180px 24pxno-repeat; 来达到更精确的定位。
F. 求ps高手，我想把这个雪碧的图片P成可乐的。图片处理
真心服了你了。你自己去网上把这个源文件下载下来。（源文件应该是psd的）把背景一换，瓶子一换。名字一换不就完了。（在昵图网上面下载，可以按照用户名或者右下角的图片编号搜索下载。）
G. html为什么用雪碧图而不用img
回答你问题前先说一下什么是雪碧图？
雪碧图：CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分
在来说一下为什么用雪碧图，有什么优点？
减少加载网页图片时对服务器的请求次数
提高页面的加载速度
减少鼠标滑过的一些bug
结论：雪碧图的优点就是在减少请求次数，如果一个网站有一1000个小图标，你用img,你要请求1000次，这个对网络会有堵塞，还有对用户体验也不够好，如果你有了雪碧图，只要加载一次就可以了，雪碧图的不足就是在于后期的维护。
H. html css关于雪碧图的一个问题~
background-position需要x轴和Y轴两个值，如果只写一个值，第二个值默认center。所以就没有继承一说了，你想hover重置第二个值，第一个值也是要再写一遍的，不能继承。
I. css 雪碧图的坐标问题，为何我弄完雪碧图后还是这样的
你要确保你每个写了背景的标签的宽度高度都写好了。这样背景图才不会完全都显示出来。
J. css雪碧图只能做背景图片吗
如果是css只能设置为背景图片如果不想作为背景图片在html内添加<img>标签