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.
3 Antworten
Sie müssen einen Pfad ohne ~ angeben
url("/Content/images/image1.jpg")
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.
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] + ')')