html - 将图像叠加层添加到按钮

Question

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

我要做的是在添加活动类时在按钮的右上角添加一个刻度图像。

这是源 http://jsfiddle.net/4GC9R/的示例

我的按钮 css 看起来像

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

.mybtn.active {
    background:#CFCFCF;
}

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

提前致谢

Answer 1

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

希望这可以帮助。

Answer 2

要添加复选标记，您可以使用:after伪元素，对于图像，您可以进一步使用content: url('image_path')or 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;
}

演示

---

PS，如果您的意思是滴答声-就像在动物中一样（例如Ixodes），也可以通过伪元素（DEMOcontent ）的属性或background属性来实现；-):after