css3 - css背景自适应问题

Question

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

Answer 1

It is best for the poster to try it himself.

In browsers that better support CSS3, it is necessary to display the same image in different sizes proportionally at different sizes. First of all, we need to unify the units

• Units should use em
• Set different font size standards according to different widths
• Set the background-size size, which is generally the same size as the background image. Unit em.
• Set background-position

The following is part of the scss code

Take writing a mobile page as an example and set the text size

.mainwarp{font-size:12px;}
@include min-screen(480px){
    .mainwarp{ font-size: 24px; }
}
@include min-screen(640px){
    .mainwarp{ font-size: 32px; }
}

Set background image

Set the size of the background image, the width and height are 486px * 389px. Here, use the custom method of scss to convert to em. Here, the maximum font size of 32 is used as the benchmark.

.phone_icon{ background: url(/static/images/common/phone_icon.png) no-repeat; background-size: pxToEm(486,32) pxToEm(389,32); }

When used specifically, the position is also set in em units, and the pte method automatically converts the position to em units.

//活动专享
.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 2

I wonder if the questioner is asking how to adapt the background image to the entire screen. If so, if you use background-size, you need to consider the compatibility issues under various browsers
Fullscreen backgrounds with centered content
Or try using img as a background image

Answer 3

If you need a button that takes up both height and width, you can use a separate image. Write background-size:cover directly like this; pay attention to compatibility.
Generally speaking, sprites use a certain position. For example, your button is also a picture when it is hovered. At this time, just change the position.