4

ボタンを画像に正常に置き換えました。しかし、画像はボタンの上に配置されているようです。他のスタイルが重なり合っているため、CSS 内に配置したくありません。また、リダイレクト ページを作成したくありません。

<button type="reset"><img src="images/cancel.png" width="15"></button>
4

4 に答える 4

12

これをCSSで実行してください！

button {
  background-image: url(images/cancel.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* put the height and width of your image here */
  height: 50px;
  width: 200px;
  border: none;
}

button span {
  display: none;
}

次に、ボタンは次のとおりです。

<button type="reset" title="In some browsers, this appears as a tooltip"> 
    <span>Cancel</span></button>

また、指定子を追加して、デフォルトのボタンの動作をオーバーライドすることもできます。たとえば-webkit-appearance: none;、必要なことを行うにはそれで十分だと思います。

于 2012-07-08T05:12:58.817 に答える
2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        function change(thi) {
            debugger;
            thi.setAttribute("src", "guitar.jpg");
            thi.innerHTML = "";
            thi.outerHTML = thi.outerHTML.replace(/button/g, "img");
        }
    </script>
</head>
<body>
    <button onclick="change(this)">OUR BUTTON</button>
</body>
</html>
于 2017-04-04T11:55:34.633 に答える
1

なぜボタンが必要なのですか？

ボタンタグを試して削除し、次のいずれかを試すことができます:

<img src="images/cancel.png" width="15" onClick="document.form1.reset();">

また

<a href="#" onClick="document.form1.reset();"><img src="images/cancel.png" width="15"></a>

「form1」をフォーム名に置き換えるだけです。

于 2012-07-08T05:16:32.850 に答える
0 
<button type="reset" width="15" style="background-image: url('images/cancel.png');"/>
于 2012-07-08T05:37:48.307 に答える