임의의 배경 이미지 배경 클립

Question

내 개인 사이트 : http://pavelrozman.com/ 배경 화면 사진이 새로 고침 될 때마다 일부 자바 스크립트로 다시로드됩니다. 그런 다음 웹에서 멋진 클리핑 마스크 자습서를 발견했습니다. 지금까지 텍스트 위로립니다 새로운 이미지 거기 새로 고침 있도록이 'Galaxy.jpg'를 말한다 곳

h1 { 
font-family: Arial; 
font-size: 5em; 
text-align: center; 

background-image: url(Galaxy.jpg); 

-webkit-background-clip: text; 
background-clip: text; 

color: rgba(0,0,0,0); 

}

나는 임의의 이미지를 사용하고 싶습니다.

Answer 1

이것은 내가 문제에 접근하는 방법이며, 내가 생각할 수있는 유일한 해결책은 배경 이미지를 변경하기 위해 jquery를 사용해야한다는 것입니다.

먼저 배경에 사용할 이미지 이름의 배열을 만듭니다. 나는이 변수 배경을 불렀다.

JQuery와 코드 :

var background = ["Galaxy","Galaxy2","Galaxy3","Galaxy4","Galaxy5"]; 
    var randombackground = Math.floor((Math.random()*5)); 
    /*This will generate a random number between 0 and 4, which we will use to access our array, change the 5 to the number of wallpapers that you have*/ 


$(document).ready(function(){ 
    $("h1").css("background-image","url('" + background[randombackground] + ".jpg')"); 
}); 

위의 코드는 때마다 다른 배경 화면을 페이지가로드를 선택하는 임의의 숫자를 생성합니다. 이것은 페이지가로드 될 때마다 난수가 변경되기 때문입니다. 코드가 제대로 작동하려면 http://jquery.com/이 설치되어 있어야합니다.

희망이 도움이됩니다.