响应精灵/百分比 [英] responsive sprites / percentages

问题描述

我已经阅读关于响应精灵使用CSS的每一个问题，我看到jsfiddle响应精灵的工作示例，但我仍然不能理解如何获得背景位置和背景大小的百分比，如何使用包装器（有些人说它是必要的）使用background-image的div和为什么使用它...

例如，如果我有一个div的宽度：20％（说40px）并且是圆形。我需要使用作为背景图像的图像具有80px宽度（一个圆，我需要调整它的大小以适应我的div），并且是我的sprite表中的40图像之一。它在位置-173像素-293像素。

我真的没有线索如何使它工作。

我试过：

I've read every single question about responsive sprites using css, I saw jsfiddle with working examples of responsive sprites, but I still cannot understand how to get the percentage of background-position and of background-size, how to use a wrapper (some people say it is necessary) around the div that uses background-image and why to use it...
For instance, if I have a div that has width:20% (say 40px) and is a circle. The image I need to use as background-image has 80px width (a circle, and I need to resize it to fit my div) and is one of the 40 images I have in my sprite sheet. It is at the position -173px -293px.
I really have no clue how to make it work.
I tried:

div {
  width:20%;
  border-radius:50%;
  background: url('images/sprites.png') no-repeat 72.083% 67.981%;
  background-size: 50%;
  }

当然，它没有工作。我不明白如何获取background-position-x，background-position-y（我有来自auto尺寸精灵表的数字）当背景尺寸不是自动的，或如何背景尺寸涉及div大小的百分比。

我可以使用任何数学公式吗？任何人可以解释我或给我一些网站/书的名字，我可以学习它吗？

感谢，

Of course, it did not work. I don't understand how to get the background-position-x, background-position-y (the numbers I have are from the "auto" size sprite sheet) when the background-size is not auto, or how the background-size relates to the percentage of the div size.
Is there any mathematical formula that I can use? Can anyone please explain me or give me a name of some website/book where I can learn it?
Thanks,

推荐答案

div维度不会在演算中显示，只有背景大小，以及您要使用的部分。

The div dimension doesn't play in the calculus, only the background sizes, and the part that you are going to use.

假设您的背景宽度为1000像素，高度为500像素。

Lets say that your background has a width of 1000px and a height of 500px.

您要使用的图片的宽度和高度为80px。

The image that you are going to use has 80px width and height.

背景尺寸：

x part     1000px / 80px = 12.5   ->> 1250%
y part      500px / 80px = 6.25   ->>  625%

background-size: 1250% 625%;

背景位置：

x-part     173px / 1000px = 0.173   ->> 17.3%
y part     293px / 500px = 0.586    ->> 58.6%

background-position: 17.3% 58.6%;

这篇关于响应精灵/百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！