按钮与背景渐变和图像使用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; 
      } 
}