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 以添加一张图片，但图片无法获得我的 div 的全尺寸。
如何在设置事件点击(更改图像)后设置我的 div 的图像全尺寸
最佳答案
设置元素的background-size:
#x {
background-size: 100% 100%;
}
并且仅更改 javascript 中的 background-image(而不是整个 background 属性):
$('#x').css({'background-image': 'url('+xxx+')'});
引用资料:
关于JQuery/CSS - 我如何设置 imagem 全尺寸的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16741719/