Css改进样式

Question

我该如何改进这些CSS以不重复背景位置？我可以在每个图标内添加一些内容来引用另一个添加背景位置的类吗？

.icon-add-item { 
    background-image: url("../../../images/Reports/icon_addItem.png"); 
    background-position: 50%; 
} 

.icon-remove-item { 
    background-image: url("../../../images/Reports/icon_removeItem.png"); 
    background-position: 50%; 
} 

.icon-dragdrop-item { 
    background-image: url("../../../images/Reports/icon_layout1_dragDrop.png"); 
    background-position: 50%; 
} 

.icon-filter-column { 
    background-image: url("../../../images/Reports/icon_layout1_filter.png"); 
    background-position: 50%; 
} 

Answer 1

一次指定所有这些阶级的共同CSS规则，而不是将其定义为每个像这样：

.icon-add-item { 
    background-image: url("../../../images/Reports/icon_addItem.png"); 
} 

.icon-remove-item { 
    background-image: url("../../../images/Reports/icon_removeItem.png"); 
} 

.icon-dragdrop-item { 
    background-image: url("../../../images/Reports/icon_layout1_dragDrop.png"); 
} 

.icon-filter-column { 
    background-image: url("../../../images/Reports/icon_layout1_filter.png"); 
} 

.icon-add-item, .icon-remove-item, .icon-dragdrop-item, .icon-filter-column { 
    background-position: 50%; 
}