0

私の個人的なサイト: http://pavelrozman.com/では、バックグラウンドの写真は、JavaScript を使用して更新するたびにリロードされます。その後、Web でクリッピング マスクのチュートリアルを見つけました。

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 に答える