Question

在我的基于ASP.NET MVC 3 / jQuery / HTML5的Web应用程序中（我认为MVC在此上下文中无关紧要），我在视图中有一个div元素，它使用运行的操作中的文本进行更新在服务器上。服务器操作完成后，我想在div添加背景图像，表示成功或失败。

包含div的宽度可变，因此我认为图像需要缩放（同时保留比例）。为了让图像可以缩放，我想它也需要是SVG格式吗？

您如何建议我根据我的要求在JavaScript / jQuery中使用背景图片更新div元素？如果我需要进一步说明，请告诉我。

修改

我也很欣赏免费图标的建议，用于表示成功/失败状态：）

Answer 1

首先，SVG不是强制性的，并不是所有浏览器都支持。任何图像格式都适合。如果您调整大小，请保持比例。

如果是的话，我会使用jQuery的ajax方法，并对ajax请求的结果采取必要的操作。

例如;

    $(document).ready(function(){
            $.ajax({
                    url: 'aa.html',
                    beforeSend: function() { $('#loader').fadeIn("slow"); },
                    complete: function() { $('#loader').fadeOut("slow"); },
                    success: function(data){
                            $("#page").html(data);
                            $("#page").fadeIn("slow");
                    },
                    error: function(jqXHR, textStatus, errorThrown){
                            $("#page").html(jqXHR + ' ' + textStatus + ' ' + errorThrown);
                            $("#page").fadeIn("slow");
                    }
            });
    });

您可以根据需要修改此示例，也可以按照链接获取jQuery的完整ajax参考。

http://api.jquery.com/jQuery.ajax/

Answer 2

我能够通过CSS属性background-image包含背景SVG。此外，background-size: contain允许背景图像与div一起缩放（优秀！）。 CSS示例：

div {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg);
}

有关工作示例，请参阅我的jsFiddle。

我理解这个解决方案需要更新的浏览器，例如IE9。

我想用文本在div中动态显示背景图片，怎么样？

2 个答案: