时间戳

首页 > 解决方案 > 具有固定定位的切片背景图像

html - 具有固定定位的切片背景图像

问题描述

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

我正在尝试创建一个覆盖另一个图像的切片图像，当您悬停任何切片时，它会消失并显示底层图片。我所做的是我创建了几个代表每个切片的 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'
});

标签： htmlcsssassbackground

解决方案

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

背景位置：中心；

这将使您的图像以您的 div 为中心。

背景尺寸：封面；

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

推荐阅读