Question

实际上，我认为css中的背景属性非常难以学习。

但现在图像精灵让我烦恼。

<style type="text/css">
a.button{
    height:36px;
    background-image: url("../../Images/button-sprite.jpg");
    text-indent:-9999px;
    display: inline-block;
}
a#add-to-basket{
    width:174px;
    background-position: 0px 0px;
}
a#framing-options{
    width:210px;
    background-position: -175px 0px;
}
a#add-to-basket:hover{
    background-position: 0px -40px;
}
a#framing-options:hover{
    background-position:-175px -40px;
}
a#add-to-basket:active{
    background-position: 0px -80px;
}
a#framing-options:active{
    background-position: -175px -80px;
}
</style>
<body>
    <a class="button" id="add-to-basket">Add to basket</a>
    <a class="button" id="framing-options">Framing options</a>
</body>

在这种情况下，background-position属性用于描述从哪里

应显示背景图像。这很容易理解。

DJANGO_SETTINGS_MODULE

但在此代码中，background-position用于显示图像的一部分。

我不明白为什么以及如何???我理解背景不能移到最底层

或者正确，因为标签不像身体标签那么大。

https://www.w3schools.com/cssref/pr_background-position.asp

但是w3schools说背景位置设置了背景图像的起始位置。这并不能说这个属性可以显示图像的一部分。

有人可以解释一下吗？

（CSS图像精灵）我为什么要使用background-position属性？

0 个答案: