Question

我无法为我的生活弄清楚看起来如此简单的东西。最重要的是，我有一个简单的CSS问题，我无法弄清楚。：-）

我正试图通过更改类来移动背景图像的位置。这不必在单个html文件中发生，因此不涉及 javaScript。 strong>

这就像经典的“裁剪切换按钮”，其中hover状态将图像移动了一定数量的像素。但是，在这种情况下似乎不起作用。

在step1.html中，我的html看起来像这样：

<div id="progress" class="progress1">
    <p>STEP 1/3&nbsp;</p>
</div>

在step2.html中，我的html如下所示：

<div id="progress" class="progress2">
    <p>STEP 2/3&nbsp;</p>
</div>

请注意，唯一的更改是将class="progress1"更改为class="progress2"。

我的CSS看起来像这样：

#progress{
    position:relative;
    display:block;
    background: url(../images/progressBar.png) 65px 0px  no-repeat  !important;
    width:565px;
    height:36px;
    line-height:36px;
    margin:1em 0;
}
.progress1{
    background: url(../images/progressBar.png) 65px 0px  no-repeat  !important;
}
.progress2{
    background: url(../images/progressBar.png) 65px -36px  no-repeat  !important;
}
.progress3a{
    background: url(../images/progressBar.png) 65px -72px  no-repeat  !important;
}
.progress3b{
    background: url(../images/progressBar.png) 65px -108px  no-repeat  !important;
}

我也尝试过在ID中添加完整的background声明，并且仅更改类中的位置，例如：background-position: 65px -108px。

Answer 1

尝试一下：

#progress{
    position:relative;
    display:block;
    background: url(../images/progressBar.png) 65px 0px  no-repeat  !important;
    width:565px;
    height:36px;
    line-height:36px;
    margin:1em 0;
}
#progress.progress1{
    background: url(../images/progressBar.png) 65px 0px  no-repeat  !important;
}
#progress.progress2{
    background: url(../images/progressBar.png) 65px -36px  no-repeat  !important;
}
#progress.progress3a{
    background: url(../images/progressBar.png) 65px -72px  no-repeat  !important;
}
#progress.progress3b{
    background: url(../images/progressBar.png) 65px -108px  no-repeat  !important;
}

问题是#progress选择器始终比.progress1或.progress2选择器具有更高的特异性，即使使用！important也是如此。因此，您需要将特异性保持在同一“级别”上，以便能够用.progress1或.progress2

覆盖它。

添加类以在不使用JavaScript的情况下更改div中的位置背景图像

1 个答案: