Question

我总共有8个图标，4个蓝色和4个灰色。因此，产品1有一个蓝色图标，并且还有一个灰色图标。

当我有产品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>

小提琴将更多地阐明我想要实现的目标！

Answer 1

你的图标显示完全正常..问题是你的方块太小了..我在此解决了这个问题：

.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

Answer 2

因为您要更改.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

Answer 3

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

基于类名的CSS背景位置

3 个答案: