背景剪辑的随机背景图像

Question

在我的个人网站上：http://pavelrozman.com/ 每次刷新时都会使用一些 javascript 重新加载背景照片。然后，我在网上偶然发现了一个很酷的剪贴蒙版教程。

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

}

我想使用显示“Galaxy.jpg”的随机图像，这样每次刷新都会有一个新图像被剪辑在文本上。

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/ 才能使代码正常工作。

希望这会有所帮助。