jQuery的用戶對話框按鈕

Question

我有這個jQuery用戶對話框：

<!-- jQuery UI dialogs --> 
    <div class="widget">  
     <div class="head"><h5 class="iAlert">jQuery UI dialogs</h5></div> 
     <div class="body aligncenter"> 

      <div class="uDialog"> 
       <div id="dialog-message" title="Download complete"> 
        <p><img src="images/icons/color/tick.png" alt="" class="icon" />Your files have downloaded successfully into the My Downloads folder.</p> 
        <p>Currently using <strong>36% of your storage space</strong></p> 

        <div class="uiForm"> 
         <form action="" class="mainForm"> 
          <input type="text" value="http://" name="inputtext"/> 
          <input type="radio" name="question1" checked="checked" /><label>Selected radio</label> 
          <input type="radio" name="question1" /><label>Normal state</label> 
         </form> 
        </div> 
       </div> 
       <!-- Sample page content to illustrate the layering of the dialog --> 
       <input type="button" value="Usual jQuery UI dialog" class="blueBtn" id="opener" /> 
      </div> 

     </div> 
    </div> 

我想從按鈕切換輸入圖像，像這樣：

<a href="#" title=""class="btn55 mr10"><img src="images/add.png" alt="" /><span>Add</span></a> 

有一個辦法？

Answer 1

你可以創建一個小提琴，所以我可以更精確？
這裏是一個鏈接jsfiddle.net/trajce/yhQeZ/
對於輸入，你可以做這樣的：

/* this is general selector, if you want to target specific element, then add class or id*/ 
    input[type="button"] 
    { 
     width:120px;/*these are just some sample width and height*/ 
     height:30px; 
     background: url('http://www.google.com/images/srpr/logo4w.png') center no-repeat;/*set your image as background of the input.*/ 
    } 

Answer 2

例如在Fiddle

使用類的輸入

.blueBtn { 
    background-image: url('http://www.psdgraphics.com/wp-content/uploads/2009/07/push-button.jpg'); 
    background-size: 100%; 
    background-repeat: no-repeat; 
    background-position: center; 
    height: 40px; 
    width: 50px; 
} 

或者用的後臺規則組合

.blueBtn { 
    background: url('http://www.psdgraphics.com/wp-content/uploads/2009/07/push-button.jpg')no-repeat center; 
    background-size: 100% 100% ; 
    height: 40px; 
    width: 50px; 
}