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

您需要使用,

分隔这些职位

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

使用center center作为渐变，您可以相应地设置渐变的位置，因为@Bolt告诉您使用0

Answer 2

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

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

Answer 3

你也可以这样使用：

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

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

3 个答案: