Question

我有以下代码用于上传background image。

<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是超级媒体资源，重置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/

Answer 2

我创建了一个jsfiddle http://jsfiddle.net/kHqLE/2/

e.target.result的输出不是图像对象，而是原始字符串。

使用css自动调整背景图像

2 个答案: