拖动png图像时是否可以删除背景颜色？答案

【问题标题】：Is it possible to remove background color when dragging png image?拖动png图像时是否可以删除背景颜色？
【发布时间】：2019-09-04 05:47:02
【问题描述】：

我正在尝试使用 react-dnd 在 react-js 中制作国际象棋游戏

我正在尝试在不同的 div（代表棋盘方格）之间制作可拖动和可放置的 png 图像

我尝试将图像背景颜色的不透明度设置为 0，但它不起作用

问题是当我拖动图像时，图像采用方形背景颜色是否可以将其从拖动图像中删除？如果没有，是否有另一个拖放库可以实现？

【问题讨论】：

欢迎，请看stackoverflow.com/help/how-to-ask如何提问和stackoverflow.com/help/mcve如何创建一个最小的完整示例

标签： javascript reactjs drag-and-drop react-dnd

【解决方案1】：

您可以将 css 样式添加到您的可拖动元素：

transform: translate(0, 0);

【讨论】：

【解决方案2】：

关键是让预览只包含作品的图像，而不是包含更多内容。如果您编辑您的问题以指向更多代码，我可能会为您提供更多帮助。

例如：

const Knight = ({ connectDragSource, connectDragPreview, isDragging }) => {
  return (
    <>
      <DragPreviewImage connect={connectDragPreview} src={knightImage} />
      <div
        ref={connectDragSource}
        style={Object.assign({}, knightStyle, {
          opacity: isDragging ? 0.5 : 1,
        })}
      >
        ♘
      </div>
    </>
    )
   }

Full code. See Knight.jsx

【讨论】：