分离css图像属性

Separating css image properties

本文关键字：属性 图像 css 分离      更新时间：2023-09-26

我有4个箭头图像，我想添加到CSS类中（上、下、右、左）。

我创建了一个基本的箭头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;
}

然后将它添加到表格单元格中，它就可以正常工作了。

如何避免在每节课上重复"背景重复"answers"背景位置"？

正确的代码是：

.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>
相关文章：