具有固定定位的切片背景图像答案

【问题标题】：Sliced background image with fixed positioning具有固定定位的切片背景图像
【发布时间】：2019-04-16 04:33:45
【问题描述】：

这是我的第一个问题，所以我可能会错过一些东西。如果您需要任何其他信息，请告诉我。

我正在尝试创建一个覆盖另一个图像的切片图像，当您悬停任何切片时，它会消失并显示底层图片。我所做的是我创建了几个代表每个切片的 div，然后使用固定的背景位置，因此覆盖的图像看起来很完整。

我已经完成了这个概念，但我在调整重叠图片的位置时遇到了一些问题。由于我使用的是固定背景定位，因此覆盖图片在响应式环境中不起作用，也就是说，如果我没有将图像定位在左上角。但是如果我去掉固定的定位，我就无法创建一个无缝的切片图片。

这可以解决还是我完全以错误的方式解决了这个问题？感谢您的帮助！

这是我所做的代码笔https://codepen.io/renryl/pen/MzJjpd。

body {
  margin-left: 50px;
}

$itemWidth: 20px;
$foreground-image: 'https://i.warosu.org/data/biz/img/0022/15/1495964000552.jpg';
$background-image: 'https://vignette.wikia.nocookie.net/wiiu/images/5/5e/New-Super-Mario-Bros-Art-21-400x400.jpg/revision/latest?cb=20121029024830';

.background-picture {
  max-width: 400px;
  height: 400px;
  overflow: hidden;
  background: rgba(#424242,.5) url($background-image) no-repeat;
  border-radius: 50%;
}

.foreground-picture {
  width: $itemWidth;
  height: 100%;
  display: inline-block;
  transition: all 1.5s ease-in-out;
  background: rgba(#424242,.5) url($foreground-image) no-repeat fixed;

  &:hover{
    transition: all 0s linear;
    opacity:0;
  }
}

<html>
<body>
  <div id="app">
    <picture inline-template>
        <div class="background-picture">
        <div v-for="i in numberOfSlices" :key="i" class="foreground-picture"></div>
  </div>
    </picture>
  </div>
</body>

</html>


Vue.component('picture', {
  data() {
      return {
         numberOfSlices: 20
      }
  }
});

var vm = new Vue({
  el: '#app'
});

【问题讨论】：

标签： html css sass background

【解决方案1】：

如果我理解，您需要这两个属性：

背景位置：中心；

这将使您的图像居中到您的 div。

背景尺寸：封面；

背景大小的封面将适合内容并覆盖所有内容

【讨论】：

感谢您的回答！当我将这些设置为属性时，前景图像被“放大”。有没有办法在保持图像大小/分辨率的同时做到这一点？
来自 MDN for background-cover: '在不拉伸图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，则将其垂直或水平裁剪，以便没有剩余空间。如果您希望图像具有响应性，则必须“放大”以填充所有可用空间。否则，您将在图像的侧面或顶部有间隙
感谢@paddyfields 的澄清 :)