Question

我想要添加到CSS类（向上，向下，向右，向左）的4个箭头图像。

我创建了一个基本的箭头css类：

.arrow {
    background-repeat: no-repeat;
    background-position: center;
}

然后创建子类，例如：

.arrow .up {
    background-image: url("../img/arrow-up.png");
}
arrow .down {
    background-image: url("../img/arrow-down.png");
}

当我将两个类添加到表格单元格（使用jQuery）时，它不会显示图像。问题是，如果我将它们组合成一个类，例如

.arrow-up {
    background-image: url("../img/arrow-up.png");
    background-repeat: no-repeat;
    background-position: center;
}

然后将其添加到表格单元格中就可以了。

如何避免重复＆＃34;背景重复＆＃34;和＆＃34;背景位置＆＃34;在每个班级？

Answer 1

正确的代码是：

.arrow {
    background-repeat: no-repeat;
    background-position: center;
}
.arrow.up {
    background-image: url("../img/arrow-up.png");
}
.arrow.down {
    background-image: url("../img/arrow-down.png");
}

<td class="arrow up">
 Content
</td>

分离css图像属性

1 个答案: