html - 使用 div 创建拖动提示

Question

在下面的代码中，我创建了一个 div 元素用作拖动 hint。它最初是隐藏，然后在 Kendo TreeView 的 drag 事件中变为可见。 drag hint plunk

顺便说一句，http://plnkr.co/edit/55MdA3NajWtNYUIYNXGr?p=preview ，您可以简单地展开一个 TreeView 节点并开始将其向下拖动到下面的 Kendo 网格。

我的问题是:如何在外部 div 仍然具有 opacity: .3 的情况下使“DROP RISK MEASURE HERE”文本有点暗？我真的不想在此之外创建另一个 div 只是为了让文本更粗。

谢谢你，

鲍勃

例如/

.drop-zone {
        color:crimson;
        visibility: hidden;
        border: 2px dashed;
        background-color: seashell;
        height: 200px;
        width: 720px;
        top: 400px;
        position: absolute;
        opacity: .3;
        z-index:10;
    }
    .drop-text {
        font-size: 16px;
        font-weight:bold;
        color: crimson;
        text-align:center;
        opacity: 1;
    }

<div id="dropAreaDimen" class="drop-zone">
  <div class="drop-text">DROP RISK MEASURE HERE..</div>
</div>

Answer 1

这只会淡出背景并使文本保持准确的不透明度值。

先把线去掉

background-color: seashell;

来自 .drop-zone 类的样式

然后添加这一行

background-color:rgba(245,255,238,0.3);