代码之家 › 专栏 › 技术社区 › Parapluie

添加类以更改div中不带javascript的位置背景图像[重复]

css

Parapluie · 技术社区 · 6 年前

这个问题已经有了答案:

Points in CSS specificity 7答

我一辈子都搞不懂什么看起来这么简单。除此之外,我还有一个简单的css问题,我无法解决。-)

我试图通过改变类来改变背景图像的位置。 这不必在单个html文件中发生,因此 不涉及JavaScript。

这就像经典的“裁剪切换按钮”,其中 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;
}

我也试过加上 background 在ID中声明,只更改类中的位置,如下所示: background-position: 65px -108px .

1 回复 | 直到 6 年前

August 6 年前

试试这个:

#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 选档杆!重要的。所以你需要在同一个“水平”上保持特殊性才能覆盖它。 进步1 或 进步2

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前