html - 更改图像 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");
}

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