基於類名稱的CSS背景位置

我總共有8個圖標，4個藍色和4個灰色。所以產品1有一個藍色的圖標，也有一個灰色的圖標。基於類名稱的CSS背景位置

當我有產品1 - 用戶將看到一個藍色圖標（添加類集裝箱說.gotProduct）時，我沒有產品1 - 用戶將看到集裝箱說灰色圖標（添加類。 noProduct）

然而，在我的CSS我似乎無法得到的圖標顯示： http://jsfiddle.net/m09zecj4/3/

同樣的，當我有不具備產品2，依此類推。

<section class="panel productPillar productTwo gotProduct"> 
    <span class="productImg"></span> 
    <p>this should be blue with a 2</p> 
</section>

小提琴將闡明我試圖達到的目標！

來源

2014-09-22 John

有點兒亂碼... – 2014-09-22 12:32:55

您添加.noProduct但你在哪裏使用它在CSS？你有兩個班，但你不改變形象的基礎上，你有產品支柱class.it不會改變，除非你有他們在gotProduct和noProduct類 – Sudheer 2014-09-22 12:37:46

你的圖標顯示完全正常的..問題是，你的方磚路太小。我在這解決了這個問題：

.productPillar { 
    background: url(http://i.stack.imgur.com/tnDR0.png) no-repeat 0 0; 
    width: 300px; /* Made this larger*/ 
    height: 300px; /* Made this larger*/ 
    display: block; 
    zoom:1.0; 
    margin-bottom:50px; 
}

如果你還是喜歡sqares要小，那麼你應該相應修改你的類的背景位置..

編輯：

這樣做的正確的方法是沒有內<span>。我已經刪除它並相應地更改了CSS。此外，您可能會弄糊塗背景圖像的x和y軸，所以我修復了它。

新JSFiddle

來源

2014-09-22 12:33:33

乾杯，但是如果.noProduct類的第二個框應該是灰色的。如果我有.productTwo，這應該顯示數字2的藍色和灰色框等等，都取決於.productOne .gotProduct/.no產品和產品2,3和4相同嗎？ – John 2014-09-22 12:36:25

@John ofcourse對不起一秒 – 2014-09-22 12:37:42

這就是使用.productPillar的圖像我需要設置不同的背景位置，如果他們有/沒有產品或依賴於他們有什麼產品編號 – John 2014-09-22 12:37:46

因爲你正在改變的.productImg類background-position，你還必須定義在.productImg類的背景。

.productImg { 
    background: url(http://i.stack.imgur.com/tnDR0.png) no-repeat 0 0; 
    width: 155px; 
    height: 155px; 
    display: block; 
    zoom:1.0; 
    margin-bottom:50px; 
}

FIDDLE

來源

2014-09-22 12:40:05 Danield

.productImg { 
 
    background-image: url(http://i.stack.imgur.com/tnDR0.png); 
 
    width: 292px; 
 
    height: 298px; 
 
    display: block; 
 
    zoom:1.0; 
 
    margin-bottom:50px; 
 
    background-repeat:no-repeat; 
 
\t border:1px solid red; 
 
} 
 

 
/*PRODUCT ONE should display a blue/grey icon with a 1 on it*/ 
 
.productOne.noProduct span.productImg{ 
 
    background-position:-18px -376px; 
 
} 
 

 
.productOne.gotProduct span.productImg{ 
 
    background-position:-18px -28px; 
 
} 
 

 
/*PRODUCT TWO - should display blue/grey icon with a 2 on it*/ 
 
.productTwo.noProduct span.productImg{ 
 
    background-position:-371px -376px; 
 
} 
 

 
.productTwo.gotProduct span.productImg{ 
 
    background-position:-371px -28px; 
 
}

<h1> Product One </h1> 
 
<section class="panel productPillar productOne gotProduct"> 
 
     <span class="productImg"></span> 
 
    <p>this should be blue with a 1</p> 
 
</section> 
 

 
<section class="panel productPillar productOne noProduct"> 
 
     <span class="productImg"></span> 
 
    <p>this should be grey with a 1</p> 
 
</section> 
 

 
<hr /> 
 
<h1> Product Two </h1> 
 
<section class="panel productPillar productTwo gotProduct"> 
 
     <span class="productImg"></span> 
 
    <p>this should be blue with a 2</p> 
 
</section> 
 

 
<section class="panel productPillar productTwo noProduct"> 
 
     <span class="productImg"></span> 
 
    <p>this should be grey with a 2</p> 
 
</section>

來源

2014-09-22 12:50:01 AvrilAlejandro

基於類名稱的CSS背景位置

回答

相關問題