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

.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渐变。如何解决这个更改图像的背景位置而不影响css3渐变

来源

2013-10-23 Arun Krishnan

你需要使用使用center center为梯度的,

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

点到分离的位置，就可以相应地设置了梯度的位置，为@Bolt告诉你使用0

来源

2013-10-23 09:44:56

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

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

来源

2013-10-23 09:44:59 BoltClock

您也可以使用这样的：

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

来源

2013-10-23 09:45:15

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

回答

相关问题