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

希望这会有所帮助。

背景夹子的任意背景图象

1 个答案: