Ich versuche, ein zufälliges Hintergrundbild für meine MVC-Anwendung auszuwählen. In meiner _Layout.cshtml habe ich den folgenden Code:

<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>

Was am Ende passiert, ist, dass das Bild nicht gefunden werden kann. Meine site.css befindet sich im Inhaltsordner und wenn ich das Bild dort wie folgt definiere:

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

Dann findet es es richtig, aber wenn ich die gleiche Definition in meinem Javascript (.css('background-image', 'url("images/image1.jpg")) mache, tut es das nicht. Mir gehen die Ideen aus, bitte helfen Sie mir dabei.

5
Konstantin Dinev 10 Okt. 2012 im 01:12

3 Antworten

Beste Antwort

Sie müssen einen Pfad ohne ~ angeben

url("/Content/images/image1.jpg")
4
Adil 9 Okt. 2012 im 21:19

Fügen Sie möglicherweise eine CSS-Klasse für jedes Hintergrundbild hinzu und verwenden Sie dann:

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

... um das Hintergrundbild zu ändern.

1
stuartb 9 Okt. 2012 im 22:10

Ihr Hintergrundarray ist falsch zusammengesetzt. In der CSHTML-Datei sollte es so aussehen:

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")'];

Auf diese Weise löst die Funktion Url.Content (...) den Pfad in die richtige Zeichenfolge auf. Überprüfen Sie, was auf der Seite im Browser gerendert wird.

Ahh, und dann können Sie mit 'url ()' für CSS einbinden.

$('html').css('background-image', 'url(' + background[index] + ')')
6
Nenad 9 Okt. 2012 im 21:38