CSS Sprite采用流畅的布局

Question

我有一个用于CSS精灵的背景图像

现在问题是我只能使用流体布局（只有％，没有px）并且％定位会在调整浏览器大小时产生问题（例如，显示其他箭头的某些部分）

我该如何解决 ？ 我可以举例说明如何使用％定位作为背景吗？

Answer 1

流体布局和使用固定定位不是相互排斥的。

如果页面上有一个不展开的元素，例如使用精灵背景的按钮，则使用px作为大小或位置是合适的（可以说是强制性的）。

Answer 2

假设图标保持其大小，您可以将图像移动到固定大小，绝对定位的子元素：

 .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>