jquery - 使用css自动调整背景图像

Question

我有以下用于上传背景图片的代码。

<input type='file' onchange="readURL(this);" />

我使用的脚本是:

function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {

                    $('#myframe')

                    .css({
                    background:'url('+e.target.result +') left top no-repeat',
                    background-size:'400px 400px'

                    });

                };

               reader.readAsDataURL(input.files[0]);//To display images uncomment this
            }
        }

有一个问题。如果我删除 background-size，上面的代码可以工作。我想减小我正在上传的图像的大小和分辨率。这里$('#myframe') 是我要上传的区域的div id。另外，让我知道如何将 multiple 属性传递给 .css() 函数。我尝试了以下代码，但没有效果:

.css(background:transparent url('+e.target.result +') left top no-repeat,background-size:200px 300px);

Answer 1

您的问题是 background 是一个 super 属性，它会重置 background-size，将 background-size 放在 background< 之后.

所以在你的情况下你想要:

$('#myframe')
    .css('background', 'transparent url('+e.target.result +') left top no-repeat')
    .css('background-size', '200px 300px');

查看此帖子 background overwrites background-size

和css 来传递多个属性，您只需传入一个对象即可。请参阅文档 http://api.jquery.com/css/