Question

好的，所以我正在使用div和背景图片处理这种对悬停的滑动效果。背景图像使用外部div最大宽度和内部div与填充底部百分比来保持纵横比。

这里有一些我不明白的事情。

我很惊讶我的％200背景位置只将图像推到几个像素上，最后需要7100％才能完全移动图像，以便重复的图像完全可见。
当我将填充底部设置为超过54％时，过渡和一切都停止工作。
这个'7100％'似乎在chrome，firefox和opera中产生了正确的效果，但不是safari。

我的小提琴，想法？ https://jsfiddle.net/riegersn/a3mnr9um

.container {
      max-width: 480px;
    }


.project {
  margin-bottom: 15px;
  cursor: pointer;
  overflow: hidden;
  width: 100%;
  background-position: center center;
  background-repeat: repeat-x;
  background-size: contain;
  transition: all 0.2s ease-out;
  padding-bottom: 54%;
  &:hover {
    background-position: 7100% 50%;
  }
}

Answer 1

设置

为了演示目的，我修改了你的小提琴。图像比例和相关的CSS属性是相同的。因此，让我们首先看一下我们从设置中获取的内容：

.container {
  max-width: 480px;
  background: orange;
}

.project {
  width: 100%;
  background-image: url("https://i.stack.imgur.com/Wurh4.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  padding-bottom: 54%;
}

<div class="container">
  <div class="project">
  </div>
</div>

Image width:      504px
Image height:     276px
Container width:  480px
Container height: 259.2px // FireFox 53

由于background-size: contain我们的背景图片具有以下尺寸：

BG image height:  259.2px
BG image width:   473.3217...px

高度等于容器高度（这就是contain在这种情况下的工作原理）。然后按如下方式计算宽度：(259.2 / 276) * 504。

Difference D:     480px - 473.3217...px = 6.6782...px

这是您在上面的代码段中可以发现的差距。因为background-position-x: center你看左边是3px而右边是另外~3px的间隙。

背景位置和百分比如何工作

简而言之：background-position-x: 50%将背景图像的中心居中到容器的中心。因此，background-position-x: 100%只会将图像的右侧与容器的右侧对齐。

.container {
  width: 700px;
  height: 300px;
  background: orange;
  background-image: url("https://i.stack.imgur.com/Wurh4.png");
  background-position: 90% 50%;
  background-repeat: no-repeat;
}

<div class="container">
</div>

以上计算的差异D恰好是100%中background-position-x: 100%在px中的表示。

7100％不是随机的

Difference D:     6.6782...px
Factor F:         480px / D = 71.8749...

要完全移出背景图像，我们必须设置background-position-x: 7174%。现在应该回答问题1。如果你跳过这里的所有内容，那么简短的回答是：100%属性在background-position属性中具有非常特殊的含义。

当我将填充底部设置为超过54％时，转换和一切都停止工作。

是的，因为那时背景图像的宽度会大于容器的宽度。

Answer 2

当谈到将百分比与位置背景图像一起使用时，它会变得有些复杂。

将背景图像移动X％意味着它将对齐X％点   图像到容器中的X％点。例如，50％表示它   将图像的中间与容器的中间对齐。   100％表示它将图像的最后一个像素与最后一个像素对齐   容器的像素，等等。

Src：https://css-tricks.com/almanac/properties/b/background-position/）

以下是对其工作原理的非常好的解释：how-does-css-computation-for-background-percentages-work

我可以推荐使用伪元素，您可以使用transform，在动画方面效果优于background-position。

使用伪也可以缩放，旋转，倾斜，来回动画等等，这些仅仅是背景图像无法实现的。

在下面的示例中发生了什么，我将伪两倍的宽度设为project，将其宽度的一半定位到左侧（left: -100%，其中100％来自其父级）然后，当我盘旋时，我将它向后移动，因此左边变为0（transform: translateX(50%)），其中translateX(50%)表示将它自己的宽度向右移动一半。

.container {
  max-width: 480px;
}

.project {
  position: relative;
  margin-bottom: 15px;
  cursor: pointer;
  overflow: hidden;
  width: 100%;
  padding-bottom: 54%;
  background-size: 0;
}
.project::before {
  content: '';
  position: absolute;
  left: -100%; top: 0;
  width: 200%; height: 100%;
  background-position: left center;
  background-repeat: repeat-x;
  background-size: contain;
  background-image: inherit;
  transition: transform 0.5s ease-out;
}
.project:hover::before {
  transform: translateX(50%);
}

<div class="container">
  <div class="project" style="background-image:url('https://www.dropbox.com/s/fpha4d0uyu71whe/pandora_thumb.png?dl=1')">
  </div>
</div>

CSS背景图像转换效果无法按预期工作

2 个答案:

设置

背景位置和百分比如何工作

7100％不是随机的