如何在使用背景位置 css 时移动图像答案

【问题标题】：How to shift image while using background-position css如何在使用背景位置 css 时移动图像
【发布时间】：2014-02-19 20:53:32
【问题描述】：

为了在我的页面上设置滚动条的样式，我使用了以下 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

【问题讨论】：

你能提供一个显示问题的小提琴吗？
@Vector jsfiddle.net/g5Fz6 顶部的文本框是之前的，底部的文本框是当前的。
基本上您必须将background-size 设置为仅显示您想要的部分的位置。不知道那是什么，你必须玩弄它

标签： html css background background-position

【解决方案1】：

首先，一旦你重新定义了background-position，center 就不再重要了。

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;

你正在覆盖它。

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

【讨论】：