0

html: 

<body>
    <div class="divD"><input type="button" id="x" name="button" value="Search"   onclick="showUser()" class="button"/></div>
    <input type="image" name="button" value="Search" onclick="showUser()" class="button"/>
    <input type="submit" name="button" value="Search" onclick="showUser()" class="button"/>
</body>

CSS:

#x
        {
            width: 100%;
            height: 100%;
            -webkit-border-radius: 19px;
            -moz-border-radius: 19px;
            border-radius: 19px;
            background-color: #424242;
            -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.75), inset 0 1px 2px rgba(255,255,255,.75);
            -moz-box-shadow: 0 2px 2px rgba(0,0,0,.75), inset 0 1px 2px rgba(255,255,255,.75);
            box-shadow: 0 2px 2px rgba(0,0,0,.75), inset 0 1px 2px rgba(255,255,255,.75);
            background-image: -webkit-linear-gradient(bottom, #454b54, #2b323b 50%, #363e46 51%, #6d7278);
            background-image: -moz-linear-gradient(bottom, #454b54, #2b323b 50%, #363e46 51%, #6d7278);
            background-image: -o-linear-gradient(bottom, #454b54, #2b323b 50%, #363e46 51%, #6d7278);
            background-image: -ms-linear-gradient(bottom, #454b54, #2b323b 50%, #363e46 51%, #6d7278);
            background-image: linear-gradient(to top, #454b54, #2b323b 50%, #363e46 51%, #6d7278);


        }

        .divD {
            width: 500px;
            height: 500px;
        }

JQuery:

$(function(){
        var xxx ="img/on.png";
            $("#x").click(function(){
                $('#x').css({'background':' url('+xxx+') no-repeat','cursor':'pointer','border':' none'});
                alert("click");
                console.log("click");
            });
    });

input="button" があり、input="button" の css を変更して 1 つの画像を追加しますが、画像が div のフルサイズになりません。

イベントクリックを設定した後、divのフルサイズの画像を設定する方法（画像の変更）

4

2 に答える 2

1

Working FIDDLE Demo

要素の を設定しbackground-sizeます。

#x {
    background-size: 100% 100%;
}

そして、javascriptのbackground-image唯一の (プロパティ全体ではない) を変更します:background

$('#x').css({'background-image': 'url('+xxx+')'});

参考文献:

于 2013-05-24T18:52:41.390 に答える
0

デモ1 デモ2

background-size: cover;

また

background-size: 100% 100%;


$(function(){
        var xxx ="http://www.atecs.biz/img/nav_gradient.png";
            $("#x").click(function(){
                $('#x').css({'background':' url('+xxx+') no-repeat','cursor':'pointer','border':' none','background-size':'cover'});
            });
    });
于 2013-05-24T18:55:08.570 に答える