Question

我正在尝试使用twitter bootstrap创建一个按钮切换。

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

我的按钮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')或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;
}

DEMO

PS 如果您的意思是 tick - as in the animal (e.g. Ixodes) ，也可以通过content或background :after属性来实现伪元素（DEMO）; - ）

将图像叠加添加到按钮

2 个答案:

DEMO