如何更改工具提示的背景颜色？

Question

我在html文件中创建了一个工具提示，如下所示：

<span title="" class="duedate-warning-msg"></span>

我将CSS属性设置为：

.duedate-warning-msg{
     background: url("/static/img/error.png") no-repeat scroll 14px 12px white;
    border-color: #f5c7c7;
    padding: .5em 0.25em 0.5em 2.5em;
    title:"my tooltip";
    color: #D11006;
}

span:hover{
    position:relative;
}

span[title]:hover:after {
    content: "This statement is past due.";
    padding: 4px 8px;
    color: white;
    font-size:16px;
    font-family: "open_sansregular";
    background: #0679ca;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

上面的样式完美地创建了工具提示。 我面临的唯一问题是我希望工具提示的背景颜色是蓝色。 但是它始终显示为灰色。 为什么会这样呢？

Answer 1

容易的是，在background-image属性中，使用您选择的颜色替换#cccccc ，假设您要保持渐近于白色（#eeeeee）的渐变。

Answer 2

从span[title]:hover:after移除背景图片

这是工作中的演示

Answer 3

删除background-image并添加background ，如下所示：

span[title]:hover:after {
    content: "This statement is past due.";
    padding: 4px 8px;
    color: white;
    font-size:16px;
    font-family: "open_sansregular";
    background: #0679ca;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background: #00F;
}