更改圖像的背景位置而不影響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漸變

回答

相關問題