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（...）関数はパスを正しい文字列に解決します。ブラウザのページに何が表示されるかを確認してください。

ああ、それならcssの「url（）」でラップすることができます。

$('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 に答える