css3 - css背景自适应问题

Question

比如我做一个高度、宽度百分比的按钮，背景用sprite的大图的一部分,用background-size或者其他属性可以做到按钮适应屏幕的大小时，背景图的那一部分也同时适应屏幕大小吗？

伊谢尔伦 · Answer

樓主最好是自己去試一下。

在支持css3較好的瀏覽器中，要做到在不同尺寸下，同樣的圖片按比例顯示不同的大小。首先要統一單位

單位要統一使用em
按不同的寬度設置不同的字體大小標準
設置background-size 大小，一般與背景圖的大小一樣。單位em.
設置 background-position

下麵是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); }

具體使用時，位置也是以em為單位設置，pte方法自動轉換位置為em單位。

//活动专享
.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);}
}

高洛峰 · Answer

不知題主是否問的是如何將背景圖片適應到整個屏幕，如果是的，采用background-size的話需要考慮一下在各瀏覽器下的兼容性問題
Fullscreen backgrounds with centered content
或者嚐試一下用img做背景圖

阿神 · Answer

你需要高度寬度都能占滿的按鈕，完全就可以用一個單獨的圖了吧。這樣直接寫 background-size:cover; 注意兼容性。
sprite 一般來說都是用某個位置，比如你的按鈕在 hover 的時候也是一張圖，這個時候改變 position 就可以了。