比如我做一个高度、宽度百分比的按钮，背景用sprite的大图的一部分,用background-size或者其他属性可以做到按钮适应屏幕的大小时，背景图的那一部分也同时适应屏幕大小吗？
ringa_lee
在支持css3较好的浏览器中，要做到在不同尺寸下，同样的图片按比例显示不同的大小。首先要统一单位
下面是scss的部分代码
.mainwarp{font-size:12px;} @include min-screen(480px){ .mainwarp{ font-size: 24px; } } @include min-screen(640px){ .mainwarp{ font-size: 32px; } }
背景图片设置大小，宽高为486px * 389px。在这里使用scss 的自定义方法，转换为em.在这里以最大字体32为基准。
.phone_icon{ background: url(/static/images/common/phone_icon.png) no-repeat; background-size: pxToEm(486,32) pxToEm(389,32); }
//活动专享 .ac_icon_byzx{background: #2cc0da; .m_icon{background-position: pte(4,32) pte(-136,32);} } //爱国教育 .ac_icon_agjy{background: #ff867a; .m_icon{background-position: pte(-59,32) pte(-132,32);} } //科普学习 .ac_icon_kpxx{background: #87bcf7; .m_icon{background-position: pte(-122,32) pte(-136,32);} } //运动休闲 .ac_icon_ydxx{background: #ad7ece; .m_icon{background-position: pte(-186,32) pte(-136,32);} }
不知题主是否问的是如何将背景图片适应到整个屏幕，如果是的，采用background-size的话需要考虑一下在各浏览器下的兼容性问题Fullscreen backgrounds with centered content 或者尝试一下用img做背景图
你需要高度宽度都能占满的按钮，完全就可以用一个单独的图了吧。这样直接写 background-size:cover; 注意兼容性。 sprite 一般来说都是用某个位置，比如你的按钮在 hover 的时候也是一张图，这个时候改变 position 就可以了。
楼主最好是自己去试一下。
在支持css3较好的浏览器中，要做到在不同尺寸下，同样的图片按比例显示不同的大小。首先要统一单位
下面是scss的部分代码
以编写手机页为例，设置文字大小
设置背景图片
具体使用时，位置也是以em为单位设置，pte方法自动转换位置为em单位。
不知题主是否问的是如何将背景图片适应到整个屏幕，如果是的，采用background-size的话需要考虑一下在各浏览器下的兼容性问题
Fullscreen backgrounds with centered content
或者尝试一下用img做背景图
你需要高度宽度都能占满的按钮，完全就可以用一个单独的图了吧。这样直接写 background-size:cover; 注意兼容性。
sprite 一般来说都是用某个位置，比如你的按钮在 hover 的时候也是一张图，这个时候改变 position 就可以了。