Это мой первый вопрос, поэтому я, наверное, что-то упущу. Пожалуйста, скажите мне, если вам нужна дополнительная информация.
Я пытаюсь создать нарезанное изображение с наложением на другое изображение, и при наведении курсора на любой из фрагментов оно исчезнет и покажет базовое изображение. Я создал несколько элементов 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'
});