web-dev-qa-db-ja.com

入力type = "button"の背景画像を追加する方法は？

私はCSSを介して入力ボタンの背景画像を変更しようとしましたが、それは動作しません。

search.html：

<body>
    <form name="myform" class="wrapper">
        <input type="text" name="q" onkeyup="showUser()" />
        <input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
         <p>
             <div id="txtHint"></div>
         </p>
    </form>
</body>

search.css：

.button {
    background-image: url ('/image/btn.png') no-repeat;
    cursor:pointer;
}

何が間違っているのでしょうか？

cSSをインライン化しても機能しないようでした。

htmlcssbutton
40
input

Word imageなしで入力する必要があります。

background: url('/image/btn.png') no-repeat;

両方の方法でテストしましたが、これは機能します。

例：

<html>
    <head>
        <style type="text/css">
            .button{
                background: url(/image/btn.png) no-repeat;
                cursor:pointer;
                border: none;
            }
        </style>
    </head>
    <body>
        <input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="image" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="submit" name="button" value="Search" onclick="showUser()" class="button"/>
    </body>
</html>
53
Jonathan Czitkovics

答えに追加するために、この場合の特定の理由は、no-repeatの置き忘れに加えて、urlと(の間のスペースだと思います。

background-image: url ('/image/btn.png') no-repeat; /* Won't work */
background-image: url('/image/btn.png'); /* Should work */
15
Pekka 웃

background-imageは、値としてURLを取ります。どちらかを使用

background-image: url ('/image/btn.png');

または

background: url ('/image/btn.png') no-repeat;

これは略記です

background-image: url ('/image/btn.png');
background-repeat: no-repeat;

また、派手な送信ボタンの button HTML要素 を見ることもできます。

6
Tgr

これが送信ボタンの場合、<input type="image" src="..." ... />を使用します。

http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_IMAGE.html

CSSで画像を指定する場合は、 使用する必要がありますtype="submit"。

3
Greg K