3 
.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 グラデーションにも影響します。これを解決する方法

4

3 に答える 3

3

グラデーションの位置も指定する必要があります。それをリセットする0px 0px必要があります：

background-position: left 10px, 0px 0px;
于 2013-10-23T09:44:59.283 に答える
2

を使用して位置を分離する必要があります,

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

@Boltが使用するように言ったように、グラデーションに使用しています。それcenter centerに応じてグラデーションの位置を設定できます0

于 2013-10-23T09:44:56.620 に答える
0

次のように使用することもできます。

    background: url(button-icon-sprite.png) left 10px,
                -moz-linear-gradient(top,  #b7e7fa 0%, #83c2dc 100%);
于 2013-10-23T09:45:15.070 に答える