5

我正在尝试为我的 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")) 中执行相同的定义，它不会。我的想法不多了，所以请帮我解决这个问题。

4

3 回答 3

6

您的背景数组以错误的方式组成。在 .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] + ')')
于 2012-10-09T21:38:47.923 回答
5

你需要给出没有路径~

url("/Content/images/image1.jpg")
于 2012-10-09T21:14:12.370 回答
1

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

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

...更改背景图像。

于 2012-10-09T22:10:11.983 回答