html - 将背景图像减少其自身而不是父元素的百分比

Question

我经常使用background images在圆角正方形内显示图标。有时为了响应的目的，我需要减小正方形和其中的图标的大小。

但是当我有几个图标显示为background images不同大小时，我想显示所有图标，比如它们原始大小的 70%，我不能只设置 a background-size: 70%，因为这意味着 70% 的正方形，而我想要的是background image自身尺寸的 70% 。

有什么方法可以在 CSS 中实现这一点？

Answer 1

转换块而不是背景图像。

transform: scale(.7);

Answer 2

如果我正确理解您的要求（背景图像本身的 70%），那么我认为 CSS 不可能做到这一点。你可以用 JS 来实现它。获取图像的尺寸，计算其中的 70%（宽度 * 0.7 和高度）并将其设置为background-size:40px 40px;