Question

我正在尝试更改背景图片和背景尺寸（因此它适合div）

$(".clickableimg").click(function() {
    var choosenpic = $(this).attr('id');
    $("#image").val(choosenpic);
    $("#preview").css("background","url(backgrounds/"+choosenpic+")");
    $("#preview").css("background","size('50%')");
});

您知道如何更改更多css属性吗？

Answer 1

设置背景样式两次会覆盖它，因此只有最后一个会粘住，您需要使用有效的CSS属性，例如background-image和background-size来单独更改它们：

$(".clickableimg").on('click', function() {
    var choosenpic = this.id;
    $("#image").val(choosenpic);
    $("#preview").css({
        'background-image' : 'url(backgrounds/'+choosenpic+')',
        'background-size'  : '50%'
    });
});

Answer 2

我不完全确定您的代码是否正常运行，因为我认为您的意思是

  $("#preview").css("background-image","url(backgrounds/"+choosenpic+")");

但是如果你已经有所作为，那就欢呼吧。

只要浏览器支持，您就可以更改任何css属性。

  $("#preview").css("display", "none")
  $("#preview").css("width", "5000px")
  $("#preview").css("text-shadow", "...")
  $("#preview").css("box-shadow", "...")
  $("#preview").css("border", "...") ..

我可以继续......但是这里列出了一些你可以玩的CSS3属性

http://www.quackit.com/css/css3/properties/

Answer 3

首先，如果你是javascript的新手，首先应该先看看javascript在开始使用像jQuery这样的框架之前是如何工作的。根据您的问题，以下jquery插件可以帮助您完成任务： https://github.com/louisremi/background-size-polyfill

此插件也可以帮助您在IE8中使用它。

Jquery更改背景大小和图像src

3 个答案: