Question

要在我的页面上设置滚动条的样式，我曾经拥有以下CSS。它给了我完美的结果，并将图像对齐在滚动条的中心。

background: #3395d2 url('img/thumb.png') no-repeat center;
border-radius: 8px;
border: 1px solid #004c98;

但是，然后我拍摄了背景并使用我页面上的其他小图片创建了一个精灵。然后再次在滚动条上设置图像样式，我使用了以下CSS。但是，这次它没有在中心对齐。

background: #3395d2 url('img/small-images.png') no-repeat center;
border-radius: 8px;
border: 1px solid #004c98;
background-position: 0 -702px;

如何编辑我的代码，以便图像仍然在滚动条的中间对齐，尽管它是在精灵中？

JSFiddle

Answer 1

首先，重新定义center后background-position甚至不重要。

background: #3395D2 url('http://s21.postimg.org/3ymz2gr8n/small_images.png') no-repeat center;

与说法相同：

background-color: #3395D2;
background-image: url('http://s21.postimg.org/3ymz2gr8n/small_images.png');
background-repeat: no-repeat;
background-position: center;

所以当你说

时

background-position: 0 -702px;

后说

background-position: center;

你要压倒它。

那说，你有另一个问题。只是因为它是一个精灵并不意味着CSS会将你的精灵中的每个图像视为一个单独的图像。如果你垂直对齐，你会看到你的精灵中的其他图像。我建议将精灵水平而不是垂直，然后调整background-position-x（当前代码中的0）以选择精灵中想要的图像，并background-position-y（{在当前代码中{1}}将其垂直居中在滚动条上。

如何在使用background-position css时移动图像

1 个答案: