如何删除 PNG 的重影图像？ （或鬼像的白色背景）

Question

我是一名初级开发人员，正在从事个人国际象棋项目。 我刚刚学会了如何创建拖放系统，也许我可以学习其他方法，但我想知道是否有任何方法可以“删除”白色背景。 我真的不知道这应该如何工作，但我有一些想法：

1. 不知何故删除了重影图像的白色背景。

2. 用拖动的实际图像替换重影图像。

3. 或者只是在拖动时完全删除重影图像，因为当您拖动它时我们可以在每个方块中看到它。

如果可以做任何这些解决方案，那就太好了！

这是我正在工作的项目的链接： https://codepen.io/ThalisonAmaral/full/qBYZmZq您可能会处理 function dragstart(); `

 function dragstart() {
        squaresDrop.forEach(square => square.classList.add('highlight'))
        this.classList.add('is-dragging');  
    }

`

拖放在Js代码的末尾

因为我不明白我到底在处理什么。 我搜索了一些可能的解决方案，但我无法使用 DataTransfer.setDragImage() 获得任何结果。

我认为它应该用于用实际图像替换重影图像，但我需要检查每一块，这似乎不是这样，但我可能是错的。

Answer 1

最简单的方法是在开始拖动时将图像的 opactiy 设置为 0，并在放下时将其设置回 1。

我添加了this.style.opacity = 0; 在第 105 行和this.style.opacity = 1; 在第 11 行

希望这是你想要的！

 /* ------- BOARD GENERATOR -------*/ const body = document.body; const $addClass = (element,className) => { element.classList.add(className); }; const $setId = (element,idName)=>{element.setAttribute('id',idName)} const $createSquare = (element,squareColor,board)=> { element = document.createElement('div'); $addClass(element,squareColor) $addClass(element,'square'); board.appendChild(element) }; const $createBoardBorder = (where) => { var board = document.createElement('div'); $addClass(board,'board'); where.appendChild(board) } var coordinates = [ 'a8','b8','c8','d8','e8','f8','g8','h8', 'a7','b7','c7','d7','e7','f7','g7','h7', 'a6','b6','c6','d6','e6','f6','g6','h6', 'a5','b5','c5','d5','e5','f5','g5','h5', 'a4','b4','c4','d4','e4','f4','g4','h4', 'a3','b3','c3','d3','e3','f3','g3','h3', 'a2','b2','c2','d2','e2','f2','g2','h2', 'a1','b1','c1','d1','e1','f1','g1','h1' ]; function createBoard(size,lightColor,darkColor,where){ /* CREATING A DIV WITH A CLASS 'board' */ $createBoardBorder(where); /* SELECTING THE BOARD */ var board = document.querySelector('.board'); /* GENERATING ALL THE SQUARES AND PUTTING THEM INTO THE BOARD */ var light = 'light'; var dark = 'dark'; for (let i = 0; i < 32; i++) { $createSquare(coordinates,light,board); $createSquare(coordinates,dark,board); if((i+1)%4 === 0 ){ var x = light; light = dark; dark = x; } } const squares = document.querySelectorAll('.square'); /*PUTTING ALL THE IDS IN EACH SQUARE */ for (let i = 0; i < squares.length; i++) { $setId(squares[i],coordinates[i]) } // ----- BOARD STYLE ----- const lightSquares = document.querySelectorAll('.light'); const darkSquares = document.querySelectorAll('.dark'); board.style.width = size+'px'; board.style.height = size+'px'; lightSquares.forEach((value,index)=>{ value.style.height = size/8+'px'; value.style.width = size/8+'px'; value.style.backgroundColor = lightColor; darkSquares[index].style.height = size/8+'px'; darkSquares[index].style.width = size/8+'px'; darkSquares[index].style.backgroundColor = darkColor; }) } const boardzone = document.getElementById('boardzone'); createBoard(500,'white','rgb(64, 100, 145)',boardzone); /*-------- PIECE RENDER --------*/ const king = document.createElement('img'); king.setAttribute('class','piece'); king.src = "https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wk.png"; e1.appendChild(king) /*-------- DRAG AND DROP --------*/ var audio = new Audio('sound.wav'); var pieces = document.querySelectorAll('.piece'); console.log(pieces); var squaresDrop = document.querySelectorAll('.square'); pieceCheck = ()=> { var pieces = document.querySelectorAll('.piece'); pieces.forEach(piece=>{ piece.addEventListener('dragstart',dragstart) piece.addEventListener('drag',drag) piece.addEventListener('dragend',dragend) function dragstart() { squaresDrop.forEach(square => square.classList.add('highlight')) this.style.opacity = 0; this.classList.add('is-dragging'); } function drag(){ } function dragend(){ this.style.opacity = 1; this.classList.remove('is-dragging'); audio.play(); } })} pieceCheck(); //Checking if a new piece was added in the board squaresDrop.forEach(square=>{ square.addEventListener('dragenter',dragenter); square.addEventListener('dragover',dragover); square.addEventListener('dragleave',dragleave); square.addEventListener('drop',drop); function dragenter(){ } function dragover(){ this.classList.add('over') //Get dragging piece const draggedPiece = document.querySelector('.is-dragging'); this.appendChild(draggedPiece); } function dragleave(){ log('Leaving') this.classList.remove('over') } function drop(){ } })

 body { background-color:rgb(15,15,15); }.board { display: grid; grid-template-columns: repeat(8, 1fr); } #boardzone{ margin: 60px auto; display: flex; justify-content:center; } /* Drag and Drop CSS */.piece { height: 100%; user-select: none; }.highlight { background-color:rgba(14,14,14,0.2); }.is-dragging { cursor:move; opacity: 0.3; transform: translate(0, 0); }.over{ background-color: rgba(173, 240, 118, 0.315); }

 <div id='boardzone'></div>