html - 极简图像 slider 包含使用背景图像转换的最低限度的 HTML 和 CSS

Question

在尝试使用尽可能少的HTML代码(并尽可能多地放入CSS中)设置背景时，我陷入了这个 jsfiddle 演示。

主要问题
为什么第三张和第四张幻灯片的背景大小和中心原点与第一张和第二张幻灯片不同？删除 -image 部分并仅使用简写 background 显然会破坏背景位置和居中，尽管这些规则是在 CSS 中明确设置的。我忽略了什么？

额外问题
过渡有两种效果:首先是水平滑动效果，然后是最后的放大效果。是否可以使两种效果并行工作，而不是一个接一个地工作？换句话说，在幻灯片水平滑动时开始缩放，以获得更动态的平滑过渡？

.

style="background-image: url(https://...
提供所需的缩放/居中结果，背景图像很好地拟合/居中:

.

style="background: url(https://...
给出了不需要的结果，背景图像未正确拟合/居中:

Answer 1

CSS 变量就是为此目的而创建的，您可以调整背景大小以获得所需的过渡效果:

container {
  display: flex;
  margin: auto;
  width: 612px;
  outline: 1px solid black;
  height: 306px;
}

slide {
  flex: 1;
  background-image: var(--i);
  background-position: center;
  background-size: auto 100%;
  padding: 2px 0 0 2px;
  color: rgba(0, 0, 0, 0.5);
  transition: all .67s ease;
}

container slide:hover {
  flex: 15;
  background-size: auto 120%;
}

<container>
  <slide style="--i: url(https://cdn.dribbble.com/users/729829/screenshots/4185141/galshir-cactus-coffee.png)">1</slide>
  <slide style="--i: url(https://cdn.dribbble.com/users/729829/screenshots/6146136/galshir-tea-biscuit_2x.png)">2</slide>
  <slide style="--i: url(https://cdn.dribbble.com/users/729829/screenshots/4185141/galshir-cactus-coffee.png)">3</slide>
  <slide style="--i: url(https://cdn.dribbble.com/users/729829/screenshots/6146136/galshir-tea-biscuit_2x.png)">4</slide>
</container>