html - 向按钮添加图像叠加层

Question

我正在尝试使用 Twitter Bootstrap 创建按钮切换。

我想要做的是在添加事件类时在按钮的右上角添加一个勾号图像。

这是源代码的例子 http://jsfiddle.net/4GC9R/

我的按钮 css 看起来像

.mybtn {
   width:150px;
   height:150px;
   margin:5px;
   background:#FBDFDA;
   border:none;
}

.mybtn.active {
    background:#CFCFCF;
}

抱歉，如果这是一个愚蠢的问题，我已经尝试了几种方法，但我远不是 CSS 专家。

提前致谢

Answer 1

要添加复选标记，您可以使用 :after 伪元素，对于图像，您可以进一步使用 content: url('image_path') 或 背景图像:url('image_path')。此外，您的类选择器应该进行调整。也许朝这个方向:

.mybtn {
    width:150px;
    height:150px;
    margin:5px;
    background:#FBDFDA;
    border:none;
}

.mybtn.active {
    background:#CFCFCF;
    border:none;
    position:relative;
}
.mybtn.active:after {
    content: '\2713';
    position:absolute;
    top:0;
    right:0;
}

DEMO

---

P.S. 如果你的意思是 tick - as in the animal (e.g. Ixodes) ，也可以通过 content 或 :after 伪元素的 background 属性 (DEMO) ;-)