按鈕與背景漸變和圖像使用HTML和CSS

Question

我想獲得一個按鈕，漸變背景和圖像。這是我到目前爲止有：

jsfiddle/D6xKD/

如果你看一下按鈕，你可以看到漸變只圖像周圍的工作，而不是整個按鈕。

注意：此解決方案從其他參考中獲取有關具有漸變背景和背景圖像的按鈕。

我的問題是：如何獲得梯度和圖像適用於跨瀏覽器，包括IE7和以上？

HTML：

CSS：

.button{ 
    color: #FFFFFF; 
    display: inline-block; 
    font-family:Arial; 
    font-size: 10px; 
    font-weight: normal; 
    padding: 9px 36px 9px 4px; 
    text-decoration: none; 
    margin:4px auto auto; 
    cursor:pointer; 
    border:0px; 
    background: #3ba93d; 
    background-position: 66px 4px; 
    background-repeat:no-repeat; 
    background-image: url(http://goo.gl/mw5HWR); /* fallback */ 
    background-image: url(http://goo.gl/mw5HWR), -webkit-gradient(linear, left top, left bottom, from(#3ba93d), to(#27842a)); /* Saf4+, Chrome */ 
    background-image: url(http://goo.gl/mw5HWR), -webkit-linear-gradient(top, #3ba93d, #27842a); /* Chrome 10+, Saf5.1+ */ 
    background-image: url(http://goo.gl/mw5HWR), -moz-linear-gradient(top, #3ba93d, #27842a); /* FF3.6+ */ 
    background-image: url(http://goo.gl/mw5HWR), -ms-linear-gradient(top, #3ba93d, #27842a); /* IE10 */ 
    background-image: url(http://goo.gl/mw5HWR), -o-linear-gradient(top, #3ba93d, #27842a); /* Opera 11.10+ */ 
    background-image: url(http://goo.gl/mw5HWR), linear-gradient(top, #3ba93d, #27842a); /* W3C */ 
    } 

在此先感謝。

Answer 1

可以嘗試：

 <button class="button" onclick="submit();" type="button">Text button <span></span></button> 

     <style> 
     .button{ 
      color: #FFFFFF; 
      font-family:Arial; 
      font-size: 10px; 
      font-weight: normal; 
      padding: 0; 
      padding-left: 20px; 
      height: 36px; 
      width: 120px; 
      margin:4px auto auto; 
      text-align: left; 
      cursor:pointer; 
      border:0px; 
      background: #3ba93d; 
      background-position: 66px 4px; 
      background-repeat:no-repeat; 
      background: #3ba93d; /* fallback */ 
      background: -webkit-gradient(linear, left top, left bottom, from(#3ba93d), to(#27842a)); /* Saf4+, Chrome */ 
      background: -webkit-linear-gradient(top, #3ba93d, #27842a); /* Chrome 10+, Saf5.1+ */ 
      background: -moz-linear-gradient(top, #3ba93d, #27842a); /* FF3.6+ */ 
      background: -ms-linear-gradient(top, #3ba93d, #27842a); /* IE10 */ 
      background: -o-linear-gradient(top, #3ba93d, #27842a); /* Opera 11.10+ */ 
      background: linear-gradient(top, #3ba93d, #27842a); /* W3C */ 
      } 
      .button span { 
      position: absolute; 
      top: 17px; 
      left: 100px; 
      width: 20px; 
      height: 24px; 
      background: url(http://goo.gl/mw5HWR); 
      } 
      </style> 

JS Fiddle

Answer 2

這種風格是推動梯度：

background-position: 66px 4px; 

如果你刪除它，漸變填充的按鈕。

http://jsfiddle.net/D6xKD/9/

如果您需要蘋果是在一個特定的位置，我建議擴大圖像的畫布它的位置，以幫助。

Answer 3

基於@西蒙 - 戴維斯回答

你也可以ommit的 「跨度」 元素：

.button{ 
      color: #FFFFFF; 
      font-family:Arial; 
      font-size: 10px; 
      font-weight: normal; 
      padding: 0; 
      padding-left: 20px; 
      height: 36px; 
      width: 120px; 
      margin:4px auto auto; 
      text-align: left; 
      cursor:pointer; 
      border:0px; 
      background: #3ba93d; 
      background-position: 66px 4px; 
      background-repeat:no-repeat; 
      background: #3ba93d; /* fallback */ 
      background: -webkit-gradient(linear, left top, left bottom, from(#3ba93d), to(#27842a)); /* Saf4+, Chrome */ 
      background: -webkit-linear-gradient(top, #3ba93d, #27842a); /* Chrome 10+, Saf5.1+ */ 
      background: -moz-linear-gradient(top, #3ba93d, #27842a); /* FF3.6+ */ 
      background: -ms-linear-gradient(top, #3ba93d, #27842a); /* IE10 */ 
      background: -o-linear-gradient(top, #3ba93d, #27842a); /* Opera 11.10+ */ 
      background: linear-gradient(top, #3ba93d, #27842a); /* W3C */ 
      } 
      :before { 
      content : ""; 
      position: absolute; 
      top: 17px; 
      left: 100px; 
      width: 20px; 
      height: 24px; 
      background: url(your_image_url) no-repeat; 
      } 
}