更改图像onClick和onRelease？

Question

是否有可能在按下按钮时将按钮图像更改为button_pressed.png，并在再次释放按钮时将其更改回button_unpressed.png？

修改

我有以下HTML：

<header id="toolbar">
    <div id="toolbar_back">
        <form action="#/">
            <input type="image" />
        </form>
    </div>
    <h1 id="toolbar_title">Photo Prints</h1>
</header>

以下CSS：

#toolbar {
    background: #FFFFFF;
    height: 60px;
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: 0px 2px 1px #888888;
    display: table;
}

#toolbar_title {
    color: black;
    font-size: 30px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

#toolbar_back {
    padding-left: 10px;
    display: table-cell;
    vertical-align: middle;
}

#toolbar_back input {
    background: url("../img/toolbar/toolbar_back.png");
}

#toolbar_back input:active {
    background: url("../img/toolbar/toolbar_back_pressed.png");
}

但结果如下：

我只想要显示背景图像，我希望它们能够完整显示。

Answer 1

您想要将按钮设为背景图像：

#button input {
    background-image: url("img/button_unpressed.png");
    background-size: cover; /* or 'contain' */
    background-repeat: no-repeat;
}
#button input:active,
#button input:focus {
    background-image: url("img/button_pressed.png");
}

您可能还需要删除边框和其他样式才能显示背景图片。