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; 
      } 
}