仅更改图像的背景位置，而不会影响 CSS3 渐变

Question

.save-btn{
            width: 76px; 
            height: 25px;
            /*background: url(button-icon-sprite.png) no-repeat left top, #b7e7fa; /* Old browsers */
            background-image: url(button-icon-sprite.png), -moz-linear-gradient(top,  #b7e7fa 0%, #83c2dc 100%); /* FF3.6+ */
            background-image: url(button-icon-sprite.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7e7fa), color-stop(100%,#83c2dc)); /* Chrome,Safari4+ */
            background-image: url(button-icon-sprite.png), -webkit-linear-gradient(top,  #b7e7fa 0%,#83c2dc 100%); /* Chrome10+,Safari5.1+ */
            background-image: url(button-icon-sprite.png), -o-linear-gradient(top,  #b7e7fa 0%,#83c2dc 100%); /* Opera 11.10+ */
            background-image: url(button-icon-sprite.png), -ms-linear-gradient(top,  #b7e7fa 0%,#83c2dc 100%);/* IE10+ */
            background-image: url(button-icon-sprite.png), linear-gradient(to bottom,  #b7e7fa 0%,#83c2dc 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7e7fa', endColorstr='#83c2dc',GradientType=0 ); /* IE6-9 */
            background-position: left 10px; 
            background-repeat: no-repeat;
        }

我正在使用 css3 渐变和精灵图像。我需要更改图像位置。但是当我更改背景位置时，它也会影响 css3 渐变。如何解决这个问题

Answer 1

您还必须指定渐变的位置。将其重置为 0px 0px 应该可以做到：

background-position: left 10px, 0px 0px;

Answer 2

您需要

使用,分隔位置

background-position: left 10px, center center;
                      ^    ^       ^     ^
                      X    Y       X     Y
                        URL        Gradient

我使用center center表示渐变，您可以相应地设置渐变的位置，正如@Bolt告诉您的那样使用0

Answer 3

你也可以这样使用：

    background: url(button-icon-sprite.png) left 10px,
                -moz-linear-gradient(top,  #b7e7fa 0%, #83c2dc 100%);