1

多年来，我们一直没有background-size财产，但现在绝大多数浏览器实际上都支持它。

至少有两种情况background-size是非常方便的属性：

  1. 相对于某些容器的大小调整背景大小。
  2. 调整背景大小以创建动画效果。

但是对于静态（在某种意义上，不调用任何动画效果）内容的绝对大小背景呢？我们总是可以只调整我们需要调整大小的图像而不调用background-size属性。所以，由于这是一个相对较新的属性，我不知道如何正确使用它，我的问题是：特别谈论绝对值，什么时候应该以及什么时候不应该使用背景大小而不是图像预处理？

UPD：这是一个让我的问题更清楚的片段。

4

1 回答 1

1

几乎没有使用异常绝对值的用例——当您没有任何服务器端处理图像的能力时，我只能考虑使用仅限客户端的解决方案。

所以，你的严格问题的答案是“没有”，所以我最好回答更广泛的问题:)

  1. 当与 CSS 渐变一起使用时，您可以模拟重复渐变，或者用它制作图案，或者使用它来获得更好的性能。最后一种情况是最有趣的：当你在一个元素上设置了一些渐变时，它会在这个元素的高度和宽度上呈现，这有时会消耗资源。在很多情况下，您可以将渐变的大小限制为一维或有时两者都限制，因此浏览器会将其渲染为 100x100 而不是 1280x9001。

  2. 用于background-size: cover确保图像填充块。例如，您的应用程序可能有用户图片或缩略图，其中大多数都是一种特定尺寸，例如 50x50。然而，会有比这更小或更大的，并且background-size在这里会很完美 - 你可以使用cover这里来使这个图像适合该区域（嗯，这不是绝对值，但它真的很方便，通常background-position: 50% 0在使用肖像照片的情况下，无需修剪即可显示头部）。还有另一个类似的案例——使用背景大小制作整页背景。

  3. 背景尺寸通常可用于为类似视网膜的显示器制作图像，因此图像要么总是缩小（即使在非视网膜显示器上也是如此），或者有条件地缩小（使用 dpi 的媒体查询）。

  4. 当你有一些图片库时，你通常会有一些缩略图，然后点击后会变成完整的图像。如果您将调整大小的缩略图作为<img/>标签作为全尺寸图像的背景放置，则可以实现类似于渐进式 jpeg 的良好效果——这样在加载大图像时，您将有一个模糊图像作为占位符。在带有弹出窗口的类似灯箱的thigies中使用时会更好。

啊，虽然你说不要提动画，但我就是无法控制 mysel，所以我在这里放了这个演示的链接:)

于 2012-12-18T22:16:19.597 回答