Question

这是我的第一个问题，所以我可能会想念一些东西。请告诉我是否需要其他信息。

我正在尝试创建覆盖其他图像的切片图像，当您将鼠标悬停在任何切片上时，它将消失并显示基础图片。我所做的是，我创建了几个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'
});

Answer 1

如果我理解，您需要具备以下两个属性：

背景位置：居中；

这会将您的图片居中于div。

background-size：封面；

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

固定位置的切片背景图像

1 个答案: