使用背景图像过渡的极简图像滑块包含最低限度 HTML 和 CSS

Question

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

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

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

.

style="background-image: url(https://...
给出所需的 zoom/centering 结果，背景图像 fitting/centering 很好：

.

style="background: url(https://...
给出了不希望的结果，背景图像不正确 fitting/centering：

Answer 1

在您的代码中出现此行为的主要原因是您在标签内的样式属性中指定了规则 background。:

<slide style="background: url()">3</slide>

属性中的样式优先于 css!

中的样式

当使用 shorthand background 时，以下所有规则都会被覆盖：

slide {
    ...
    background-position: center;
    background-size: cover;
    background-origin: content-box;
    background-clip: border-box;
    ...
}

因为 background 已经包含 默认值 与我上面指出的值不同的值。

默认重写值，background，以及style属性中指定的background，是问题的根源在你的代码中。

我的建议：

不要自己在属性中声明样式；
使用background-image;
始终使用有效标签（即使是 SO 示例）：
您可以使用 !important 覆盖 background 规则：

像那样：

slide {
    ...
    background-position: center !important;
    background-size: cover !important;
    background-origin: content-box !important;
    background-clip: border-box !important;
    ...
}

Answer 2

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>

使用背景图像过渡的极简图像滑块包含最低限度 HTML 和 CSS

Minimalist Image Slider containing bare minimum HTML & CSS using background-image transition

html

css

flexbox

background

background-image