MVC 4 응용 프로그램의 동적 배경 이미지

Question

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는 내용 폴더에있는 내가 거기에 다음과 같은 방법으로 이미지를 정의하면됩니다 : 내 자바 스크립트 (.css('background-image', 'url("images/image1.jpg")) 내부에 동일한 정의를 수행하지만 경우에,

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

가 제대로 발견은 '아무튼 티. 나는 아이디어가 부족하므로 제발 도와주세요.

Answer 1

당신은 ~

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

Answer 2

당신의 배경 배열이 잘못된 방법으로 구성되어없이 경로를 제공해야합니다. .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 (URL)Content (...) 함수는 올바른 문자열로 경로를 확인합니다. 브라우저에서 페이지의 렌더링 내용을 확인하십시오.

아, 그러면 CSS로 'url()'로 묶을 수 있습니다.

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

Answer 3

아마 각 배경 이미지에 대한 CSS 클래스를 추가 사용

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

은 ... 배경 이미지를 변경할 수 있습니다.