css - 仅更改图像的背景位置而不影响 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 渐变和 sprite 图像。我需要更改图像位置。但是当我改变背景位置时，它也会影响到 css3 渐变。如何解决这个问题

Answer 1

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

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