Chrome中拖拽卡片时如何保持内部dropzone元素透明？

我有一个可在不同列之间拖拽的卡片元素，功能正常，但在Chrome浏览器中拖拽时，卡片内部的透明dropzone元素会变为不透明，此问题在Firefox或Safari中不会出现。我尝试调整CSS中的opacity和rgb()属性，但并未成功。

相关代码如下：

CSS代码 #

#board {
    display: flex;
    padding: 8px;
    width: 800px;
}

#board * {
    font-family: sans-serif;
}

.board__column {
    flex: 1;
    background: #fcb51d;
    padding: 10px;
    border-radius: 5px;
}

.board__column:not(:last-child) {
    margin-right: 10px;
}

.board__column-title {
    margin-bottom: 20px;
    font-size: 30px;
    color: white;
    user-select: none;
}

.board__item-card {
    box-sizing: border-box;
    cursor: pointer;
    background: white;
    padding: 8px;
    border-radius: 8px;
}

.board__item-input {
    background: white;
    padding: 10px 15px;
    border-radius: 5px;
}

.board__dropzone {
    height: 10px;
    transition: background 0.15s, height 0.15s;
}

.board__dropzone--active {
    height: 20px;
    background: rgba(0, 0, 0, 0.25);
}

.board__add-item {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: white;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

HTML代码 #

<div id="board">
    <!-- Todo's tasks -->
    <div class="board__column">
        <div class="board__column-title">Todo</div>
        <div class="board__column-items">
            <div class="board__card" draggable="true">
                <div class="board__item-card">
                    My first todo task 🤓
                </div>
                <div class="board__dropzone"></div>
            </div>
            <div class="board__card" draggable="true">
                <div class="board__item-card">
                    My second todo task...
                </div>
                <div class="board__dropzone"></div>
            </div>
        </div>
        <button class="board__add-item" type="button">+ Add card</button>
    </div>

    <!-- In progress tasks -->
    <div class="board__column">
        <div class="board__column-title">In Progress</div>
        <div class="board__column-items">
            <div class="board__card" draggable="true">
                <div class="board__item-card">
                    I'm working on the task 😁
                </div>
                <div class="board__dropzone"></div>
            </div>
        </div>
        <button class="board__add-item" type="button">+ Add card</button>
    </div>

    <!-- Done tasks -->
    <div class="board__column">
        <div class="board__column-title">Done</div>
        <div class="board__column-items">
            <div class="board__card" draggable="true">
                <div class="board__item-card">
                    I finished the task 😇
                </div>
                <div class="board__dropzone"></div>
            </div>
        </div>
        <button class="board__add-item" type="button">+ Add card</button>
    </div>
</div>

这是Chrome拖拽渲染的特有问题：当拖拽未明确设置背景色的容器时，Chrome会自动为容器内的透明区域填充背景，导致dropzone看起来不透明。

解决方法是给.board__card显式设置透明背景：

.board__card {
    background: transparent;
}

这样Chrome就会明确识别容器的背景为透明，不会在拖拽时自动填充额外颜色，同时不影响Firefox和Safari的正常表现。

内容的提问来源于stack exchange，提问作者AndaluZ