我有一个图像在另一个上面,点击一个网格瓷砖,它消失了,并显示了第二个图像的一部分。
我有两张图片,一张是.main_container
背景,另一张是3x3网格。
问题是网格中的每一块瓷砖都是他自己的图片。我想把一张大图片剪下来,每一块都放进自己的瓷砖里。
所有JS我有一个点击功能,设置一个瓷砖的不透明度为0
.我可以很容易地改变图片,只要我想,而不需要编辑成9件每一次的图像
enter image description hereenter image description here的数据库
var clicks = 0;
$(".grid-item").click(function() {
clicks++;
console.log("clicked " + clicks);
$(this).css({
"opacity": "0"
});
})
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.main_container {
width: 60%;
height: 60%;
/* background-color: #3498db; */
background-image: url("/images/cat.jpg");
background-size: cover;
background-position: center;
display: grid;
grid-template-columns: auto auto auto;
}
.grid-item {
background-image: url("/images/narava2_small.jpg");
/* background-color: rgba(255, 255, 255, 0.8); */
opacity: 1;
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
background-size: cover;
}
<div class="main_container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
1条答案
按热度按时间t9eec4r01#
background-attachment: fixed
可以做到这一点: