MVC 4 应用程序中的动态背景图像答案

【问题标题】：Dynamic background-image in MVC 4 applicationMVC 4 应用程序中的动态背景图像
【发布时间】：2012-10-09 21:12:15
【问题描述】：

我正在尝试为我的 MVC 应用程序选择一个随机背景图像。在我的 _Layout.cshtml 中，我有以下代码：

<script type="text/javascript">
    var background = ['url("~/Content/images/image1.jpg")',
            'url("~/Content/images/image2.jpg")',
            'url("~/Content/images/image3.jpg")',
            'url("~/Content/images/image4.jpg")',
            'url("~/Content/images/image5.jpg")'];

    $(document).ready(function () {
        PickRandomBackground();
    });

    function PickRandomBackground() {
        var index = Math.floor(Math.random() * 5);
        $('html').css('background-image', background[index])
    }
</script>

最终发生的是找不到图像。我的 site.css 位于 Content 文件夹中，如果我在那里定义图像，请按以下方式：

html {
    background-image: url("images/image1.jpg");
    background-position:center;
    background-repeat: no-repeat;
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

然后它会正确找到它，但是如果我在我的 javascript (.css('background-image', 'url("images/image1.jpg")) 中进行相同的定义，它不会。我的想法不多了，所以请帮我解决这个问题。

【问题讨论】：

您确实意识到这不是您的阵列中实际拥有的，是吗？ ~/Content/images/image1.jpg 和 images/image1.jpg 不等价
查看 Adil 的答案，~ 仅适用于服务器端代码。它在 JavaScript 中没有任何意义。

标签： javascript jquery css asp.net-mvc background-image

【解决方案1】：

您的背景数组以错误的方式组成。在 .cshtml 文件中，它应该如下所示：

var background = ['@Url.Content("~/Content/images/image1.jpg")',
    '@Url.Content("~/Content/images/image2.jpg")',
    '@Url.Content("~/Content/images/image3.jpg")',
    '@Url.Content("~/Content/images/image4.jpg")',
    '@Url.Content("~/Content/images/image5.jpg")'];

这样，Url.Content(...) 函数会将路径解析为正确的字符串。在浏览器中检查页面上呈现的内容。

啊，然后你可以用 'url()' 为 css 换行。

$('html').css('background-image', 'url(' + background[index] + ')')

【讨论】：

【解决方案2】：

你需要给出不带~的路径

url("/Content/images/image1.jpg")

【讨论】：

非常感谢它的工作。我想我已经习惯了网络表单，因此'~'
您也可以在您的 javascript 中编写 .net 代码，例如 var baseUrl = "<%= ResolveUrl("~/") %>".replace(/\/$/, '');，然后您可以这样定义您的 URL：'url("' + baseUrl + '/Content/images/image1.jpg")'

【解决方案3】：

也许为每个背景图片添加一个 css 类，然后使用：

$('html').attr('class', 'image4');

...更改背景图像。

【讨论】：