按钮图像 - 原始 HTML 按钮顶部的图像堆栈答案

【问题标题】：Button Image - Image Stack on top of Original HTML Button按钮图像 - 原始 HTML 按钮顶部的图像堆栈
【发布时间】：2016-07-04 08:22:21
【问题描述】：

[Image on top of button][1]

我在为按钮使用图像时遇到问题。图像位于标准按钮的顶部，而不是替换它。您可以在图像下方看到原始按钮。不仅如此，我不确定图片本身是否真的可以作为按钮使用。

由于我刚开始学习 jQuery，情况可能会更复杂，而且我在混淆自己方面做得很好。

任何帮助将不胜感激。

HTML：

    <body>
        <div id="container">
            <div class="screen">
                <div class="title">
                  <h1 class="shopper">SHOPPER</h1>
                  <img class="cart" src="images/svg/cart.svg">
              </div>
              <form name="form" id="shopping-form">
                  <div class="add-item">
                    <input type="text" maxlength="30" placeholder="Add item here" id="addForm">
                    <!-- <button id="add" type="submit">Add</button> -->
                    <input type="submit" id="blue-add">
                    <button id="remove" type="button">Remove</button>
                </div>

            </form>
            <form name="form" id="shopping-list">
            </form>
        </div>
    </div>

    </body>

CSS

            .green-box {
          background : #95C13D;
          border-style : Solid;
          border-color : #FFFFFF;
          border-width : 1px;
          width : 24px;
          height : 24px;
          border-radius : 4px;
        }

jQuery

    $(document).ready(function() {
$("#add").click(function() {
    if ( $.trim( $('#addForm').val() ) === '' ) {

        return;
    }
    else {
    addItem();
    }
});

//when enter button is pressed
    $("#addForm").keypress(function(i){
        if(i.which==13){
            addItem();
            i.preventDefault();
        }
    });



//add item
    function addItem(){
        var itemToAdd = $("#addForm").val();
        var createItem = '<div class="add-item"><div class="checkcheckcheck"><input type="checkbox" class="checkbox"></div><input type="text" class="item-field" value=" '+itemToAdd + ' "></div>';
        $("#shopping-list").append(createItem);
        $("#addForm").val("");
        $('input.check').change(function(){
        $(this).siblings('itemToAdd').toggleClass('strike');
    });
    }

//remove Item
    $("#remove").click(function(){
        $("input:checked").closest(".add-item").fadeOut(250);
    });

//toggle between line crossed off and on
    $('#shopping-list').on('change','input[type=checkbox]',function(){
        var myInput = $(this).parent().siblings('input[type=text]');
        if ($(this).is(':checked')) {
            $(myInput).css('textDecoration','line-through');
        }
        else{
            $(myInput).css('textDecoration','none');
        }
});


});

【问题讨论】：

标签： jquery html css image button

【解决方案1】：

我相信你应该使用<input type="image" />。这使用图像作为按钮。

【讨论】：

谢谢，事情已经改善了，按钮本身消失了，但“提交”的文字仍然显示出来。

【解决方案2】：

再次感谢您的帮助。根据您上面的回答进行了一些研究，我发现添加 - value=" " 解决了问题。

【讨论】：

只是说写感谢信作为回复不是一个好习惯。

【解决方案3】：

选项 1：

<input type="image" id="blue-add" name="image" src="http://bit.ly/1R1adHY" width="50">

选项 2：

HTML：

<input type="submit" id="blue-add" class="image-button">
<button id="remove" type="button" class="image-button">Remove</button>

CSS：

.image-button {
    background: url('http://bit.ly/1MpWUex');
    background-repeat: no-repeat; 
    cursor:pointer;
    border:none;
    width:100px;
    height:45px;
    font-weight: bold;
     }
  .image-button:hover {
      //you can change image
     }
  .image-button:active {
         //you can change image
     }

【讨论】：