分離css圖像屬性

我有4個箭頭圖像我想添加到CSS類（上，下，右，左）。分離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; 
}

然後將它添加到表單元格中，它工作得很好。

如何避免在每個班級重複「背景重複」和「背景位置」？

來源

2013-07-29 z_av

假設你的圖像上的類是'「向上箭頭」'，你的CSS選擇器必須是'.arrow.up'。你現在擁有的方式可以匹配具有'arrow'類的元素的後代元素'up'。 –

正確的代碼將是：

.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>

來源

2013-07-29 14:57:06 fearmear

分離css圖像屬性

回答

相關問題