CSS Sprite采用流畅的布局

Question

I have a background image to be used for CSS sprite

Now the issue is I can only use fluid layout (only %, no px) and the % positioning creates an issue while resizing the browser (eg some portion of other arrow gets displayed)

How do I fix this ? Can i get an example of how to use % positioning for background ?

Answer 1

A fluid layout and using fixed positioning are not mutually exclusive.

If you have an element on the page that does not expand, for example a button using a sprite background, then using px for size or position is appropriate (arguably mandatory).

Answer 2

Assuming that the icon maintains its size, you can move the image to a fixed size, absolute positioned child element:

 .icon { /* fluid 30% with 1:1 aspect ratio */ display: inline-block; width: 30%; padding-bottom: 30%; position: relative; border: 1px solid hotpink; } .icon::before { content: ""; /* auto margin trick for horizontal + vertical centering */ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; /* match icon size */ width: 30px; height: 30px; background-image: url(http://i.stack.imgur.com/th9Xy.png); } .icon.icon1::before { background-position: 0 0; } .icon.icon2::before { background-position: -30px 0; } .icon.icon3::before { background-position: -60px 0; } .icon.icon4::before { background-position: 0 -30px; } .icon.icon5::before { background-position: -30px -30px; } .icon.icon6::before { background-position: -60px -30px; } 

 <span class="icon icon1"></span> <span class="icon icon2"></span> <span class="icon icon3"></span> <span class="icon icon4"></span> <span class="icon icon5"></span> <span class="icon icon6"></span>