将图像叠加添加到按钮

Question

我正在尝试使用推特引导程序创建一个按钮切换。

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

这是源的示例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') 或 background-image: 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;
}

演示

---

附言如果你的意思是蜱虫 - 就像在动物中一样（例如硬蜱），这也可以通过content或:after伪元素（DEMO）的background属性来实现;-）

Answer 2

当类名为".active"添加到类为".mybtn"的按钮时，按钮的选择器将不是".mybtn .active"，而是".mybtn.active"。

希望这有帮助。