HTML5拖放鬼图的透明背景答案

【问题标题】：Transparent background for HTML5 drag-and-drop ghost imageHTML5拖放鬼图的透明背景
【发布时间】：2015-11-03 01:47:10
【问题描述】：

在 Chrome (Chromium 45) 中，可拖动元素的重影图像呈现在白色背景上。如何强制它像 Firefox 一样在透明背景上呈现重影图像？

示例： http://jsfiddle.net/c8p24q6y/
我有一个深色背景图像（用黑色表示）。当您在 Chrome 中拖动列表项时，重影图像具有难看的白色背景。在 Firefox 中，重影图像将具有透明背景。

<html>
<head>
    <style>
        body{
            background-color:black;
        }
        ul { list-style-type:none; }
        li *{
            display:inline-block;
            border-radius:10px;
            width:100px;
            height:23px;
            margin-right:8px;
            cursor:move;
        }
        li :first-child{ background-color:red; }
        li :last-child{ background-color:blue; }
    </style>
    <script>
        window.onload = function(){
            var dc = document.getElementById("drag_cont");
            dc.ondragstart = function(e){
                e.dataTransfer.setData("text/plain", "testing");
            };
        }
    </script>
</head>
<body>
    <ul id="drag_cont">
        <li draggable="true">
            <div></div><div></div>
        </li>
        <li draggable="true">
            <div></div><div></div>
        </li>
    </ul>
</body>
</html>

【问题讨论】：

您使用的是什么操作系统？我刚刚在 Mac 上的 Chrome 46 上进行了测试，一切都很好 - jsbin.com/sivaquk/latest - 这可能是 45 问题、操作系统问题或任何问题。
我在 Linux (Xubuntu) 上。我刚刚在windows上试过，它工作正常。所以，我想我真的无能为力。
提交了错误报告：code.google.com/p/chromium/issues/detail?id=550999

标签： css html google-chrome drag-and-drop

【解决方案1】：

我遇到了同样的问题，但通过安装 Compton（复合管理器）设法解决了它！这是在 Arch Linux 上使用 i3 作为 WM 的。 https://wiki.archlinux.org/index.php/Compton

【讨论】：

哦不，我以为我做到了，但事实证明我正在检查 Firefox，它之前运行良好......对不起！