0
は、私はあなたが閲覧できCSSでのスライドパズルを作っin this fiddleCSSボックスシャドウ重複が
問題は、私は灰色の背景の上にドロップシャドウを持つようにタイルを望んでいたが、私は影をしたくなかったということですそれらがすべて同じレベルにあるので、他のタイルと重なり合うようにします。
私はStackOverflowでthis questionを見たことがありますが、これは本当に同じことを求めていますが、私は解決策を得ることができません。
私はcover the overlap with a pseudo-elementにできません。バックグラウンド位置がJavaScriptで設定されている背景画像があるためです。私はnth-childを使用する複雑なCSSセレクタを使用してそれらを設定することができましたが、私は今のところJSでそれを維持したいと思います。
私は実際にはわからないので、私はput the shadow on a pseudo-element underneath the tileできません。リンクしたフィドルで試してみましたが、うまくいきません。
ご協力いただければ幸いです。ありがとう！
// This is the location of the empty square. At the start it's at 2, 2
var emptyRow = 2;
var emptyCol = 2;
// i and j, as passed in, are the tiles' original coordinates
var makeMoveHandler = function (tile, i, j) {
// row and col, as made here in closure, are the tiles up-to-date coordinates
var row = i;
var col = j;
// The click handler
return function() {
var rowOffset = Math.abs(emptyRow - row);
var colOffset = Math.abs(emptyCol - col);
// Move the tile to the vacant place next to it
if (rowOffset == 1 && colOffset == 0 || rowOffset == 0 && colOffset == 1) {
tile.style.transform = `translate(${emptyCol * 200}px, ${emptyRow * 200}px)`;
// Swap the two coordinates
[row, emptyRow] = [emptyRow, row];
[col, emptyCol] = [emptyCol, col];
}
}
};
var initTiles = function() {
// Get all of the rows
var rows = document.querySelectorAll('.row');
// Go through the rows
for (let i = 0; i < rows.length; ++i) {
var row = rows.item(i);
// Go through the tiles on each row
var tiles = row.querySelectorAll('.tile');
for (let j = 0; j < tiles.length; ++j) {
var tile = tiles.item(j);
// Add the click listener to the tile
tile.addEventListener('click', makeMoveHandler(tile, i, j));
// Set the location of the tile
tile.style.transform = `translate(${j * 200}px, ${i * 200}px)`;
// Set what part of the background to show on the tile
tile.style.backgroundPosition = `${600 - j * 200}px ${600 - i * 200}px`;
}
}
};
// Initialize the tiles
initTiles();#puzzle {
width: 600px;
height: 600px;
display: flex;
background-color: gray;
border: 5px solid blue;
}
.tile {
width: 200px;
height: 200px;
border: 1px solid black;
background-image: url('http://www.lovethispic.com/uploaded_images/123553-Beautiful-Scene.jpg');
position: absolute;
background-size: 600px 600px;
transition: transform 300ms;
}
.tile:before {
background: transparent;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -100;
box-shadow: 0 0 40px #000;
}<div id="puzzle">
<div class="row">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
<div class="row">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
<div class="row">
<div class="tile"></div>
<div class="tile"></div>
</div>
</div>