2

我正在尝试同时更改背景图像和背景大小（因此它适合 div）

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

你知道我怎样才能改变更多的css属性吗？

4

3 回答 3

9

设置背景样式两次会覆盖它，因此只有最后一个会保留，您需要使用有效的 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%'
    });
});
于 2013-05-23T08:06:48.090 回答
0

首先，如果您是 javascript 新手，您应该先了解 javascript 的基本工作原理，然后再开始使用 jQuery 之类的框架。根据您的问题，以下 jquery 插件应该可以帮助您完成任务： https ://github.com/louisremi/background-size-polyfill

这个插件也将帮助你让它在 IE8 中工作。

于 2013-05-23T08:19:32.600 回答
0

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

  $("#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/

于 2013-05-23T08:05:32.523 回答