css3 - css背景自適應(yīng)問題
問題描述
比如我做一個(gè)高度、寬度百分比的按鈕,背景用sprite的大圖的一部分,用background-size或者其他屬性可以做到按鈕適應(yīng)屏幕的大小時(shí),背景圖的那一部分也同時(shí)適應(yīng)屏幕大小嗎?
問題解答
回答1:樓主最好是自己去試一下。在支持css3較好的瀏覽器中,要做到在不同尺寸下,同樣的圖片按比例顯示不同的大小。首先要統(tǒng)一單位
單位要統(tǒng)一使用em按不同的寬度設(shè)置不同的字體大小標(biāo)準(zhǔn)設(shè)置background-size 大小,一般與背景圖的大小一樣。單位em.設(shè)置 background-position下面是scss的部分代碼
以編寫手機(jī)頁(yè)為例,設(shè)置文字大小.mainwarp{font-size:12px;}@include min-screen(480px){ .mainwarp{ font-size: 24px; }}@include min-screen(640px){ .mainwarp{ font-size: 32px; }}設(shè)置背景圖片
背景圖片設(shè)置大小,寬高為486px * 389px。在這里使用scss 的自定義方法,轉(zhuǎn)換為em.在這里以最大字體32為基準(zhǔn)。
.phone_icon{ background: url(/static/images/common/phone_icon.png) no-repeat; background-size: pxToEm(486,32) pxToEm(389,32); }具體使用時(shí),位置也是以em為單位設(shè)置,pte方法自動(dòng)轉(zhuǎn)換位置為em單位。
//活動(dòng)專享.ac_icon_byzx{background: #2cc0da; .m_icon{background-position: pte(4,32) pte(-136,32);}}//愛國(guó)教育.ac_icon_agjy{background: #ff867a; .m_icon{background-position: pte(-59,32) pte(-132,32);}}//科普學(xué)習(xí).ac_icon_kpxx{background: #87bcf7; .m_icon{background-position: pte(-122,32) pte(-136,32);}}//運(yùn)動(dòng)休閑.ac_icon_ydxx{background: #ad7ece; .m_icon{background-position: pte(-186,32) pte(-136,32);}}回答2:
不知題主是否問的是如何將背景圖片適應(yīng)到整個(gè)屏幕,如果是的,采用background-size的話需要考慮一下在各瀏覽器下的兼容性問題Fullscreen backgrounds with centered content或者嘗試一下用img做背景圖
回答3:你需要高度寬度都能占滿的按鈕,完全就可以用一個(gè)單獨(dú)的圖了吧。這樣直接寫 background-size:cover; 注意兼容性。sprite 一般來說都是用某個(gè)位置,比如你的按鈕在 hover 的時(shí)候也是一張圖,這個(gè)時(shí)候改變 position 就可以了。
相關(guān)文章:
1. javascript - sublime快鍵鍵問題2. javascript - immutable配合react提升性能?3. Apache 已經(jīng)把網(wǎng)站根目錄的改為allow from all了,但是服務(wù)器還是不能訪問?4. javascript - 移動(dòng)端上不能實(shí)現(xiàn)拖拽布局嗎?5. 實(shí)現(xiàn)bing搜索工具urlAPI提交6. vue.js - Vue 如何像Angular.js watch 一樣監(jiān)聽數(shù)據(jù)變化7. javascript - nodejs關(guān)于進(jìn)程間發(fā)送句柄的一點(diǎn)疑問8. phpstudy8.1支持win11系統(tǒng)嗎?9. 如何解決Centos下Docker服務(wù)啟動(dòng)無響應(yīng),且輸入docker命令無響應(yīng)?10. css - 寫頁(yè)面遇到個(gè)布局問題,求大佬們幫解答,在線等,急!~

網(wǎng)公網(wǎng)安備