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;
        }

查询：

$(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 以添加一个图像，但图像没有得到我的 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 回答