无需设置像素位置实现纯CSS循环背景动画可行吗？

你之前用预处理器生成的循环背景动画代码是这样的：

@keyframes anim
{
    from    {   background-position: 0 0;               }
    to      {   background-position: 256px 256px;       }
}

div
{
    background-image: url('256.png');
    width: 256px;
    height: 256px;
    background-size: 256px 256px;
    background-repeat: repeat;
    animation: anim 5s linear infinite;
}

其中background-position里的256px 256px是预处理器从图片256.png中提取的。你想知道能不能用纯CSS实现同样的循环动画，而且不用在background-position里写依赖图片尺寸的像素值——毕竟当容器和图片尺寸一样时，直接用百分比设置background-position好像没效果。

可行的纯CSS方案 #

可以通过调整background-size的比例，搭配百分比形式的background-position来实现，全程不需要硬编码图片的具体像素值：

@keyframes anim {
  from { background-position: 0 0; }
  to { background-position: 50% 50%; }
}

div {
  background-image: url('256.png');
  width: 256px; /* 这里的尺寸可以随便改，不用和图片尺寸绑定 */
  height: 256px;
  background-size: 200% 200%;
  background-repeat: repeat;
  animation: anim 5s linear infinite;
}

方案原理 #

• 把background-size设为200% 200%，相当于让单张背景图只占容器宽高的一半，同时通过重复平铺填满整个容器。
• 动画从0 0移动到50% 50%，这个位移距离刚好等于一张背景图的原始尺寸（因为背景图被缩放成容器的一半，50%的位移就对应原图片的尺寸），视觉上就能实现无缝循环的滚动效果。
• 整个逻辑完全靠CSS的百分比计算，不需要提前知道图片的具体像素值，容器尺寸也可以随意调整，只要保持宽高比例和图片一致就行。

内容的提问来源于stack exchange，提问作者Shtole