0

在我的个人网站上：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”，这样每次刷新都会有一个新图像被剪辑在文本上。

4

1 回答 1

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

希望这可以帮助。

于 2013-03-13T00:23:26.717 回答