我在CSS中制作了一个滑动拼图,您可以查看in this fiddle
问题在于我希望瓷砖在灰色背景上有阴影,但我不希望阴影与其他瓷砖重叠,因为它们都在同一水平上。
我在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>
答案 0 :(得分:0)
我终于找到了两种解决问题的方法,两者都不是很漂亮。我没有C#
,我接受了这个。但是,我可以创建一个包含box-shadow
图片的伪元素,所以我就这样做了。
我无法忍受浏览器必须下载完全独立的图像仅用于阴影的想法,所以我使用CSS3近似了box-shadow
渐变,有效(至少在Chrome中)。
(某种)模拟box-shadow
:
box-shadow
&#13;
div {
width: 200px;
height: 200px;
margin: 50px;
background-color: green;
position: relative;
opacity: 0.5;
}
div:before {
position: absolute;
content: '';
left: -20px;
right: -20px;
top: 0;
bottom: 0;
background: linear-gradient(90deg, transparent 220px, black 220px, transparent 240px ),
linear-gradient(-90deg, transparent 220px, black 220px, transparent 240px );
z-index: -1;
}
div:after {
position: absolute;
content: '';
top: -20px;
bottom: -20px;
left: 0;
right: 0;
background: linear-gradient(0deg, transparent 220px, black 220px, transparent 240px ),
linear-gradient(180deg, transparent 220px, black 220px, transparent 240px );
z-index: -1;
}
&#13;
JSFiddle with the sliding puzzle result,因为它在这里的片段中无法正常工作。
答案 1 :(得分:0)
您可以在包含所有行和图块的新元素上使用filter: drop-shadow(0 0 40px #000)
:
<div id="puzzle">
<div class="puzzle-inner" style="filter:drop-shadow(0 0 40px #000);">
<div class="row"> ...
这适用于其包含元素的累积“剪影”。
这不适用于#puzzle
元素本身,因为它具有背景集,该背景集将包含在轮廓中。