フロントエンドのメモ - ランダムなbackground_html/css_WEBの使用

フロントエンドのメモ - ランダムなbackground_html/css_WEBの使用 - ITnose

WBOY

リリース： 2016-06-21 08:52:10

オリジナル

1358 人が閲覧しました

著者: Zhao Ce

発行日: 2016-4-5

ウェブサイトを開くたびに、いつも見覚えがあり、そのような気がしますずっと見てたら醜い！！！そこで今日は突然思いつき、Webサイトの背景を適当に作ってみました。見た目も新しくなり、さらに快適になりました。

ランダム背景を使う方法はたくさんありますが、今回は比較的分かりやすい簡単な方法を紹介します。

原則は、js コードを使用して、画像パスを表す文字列または HTML コードを動的に生成することです

まずファイル構造を見てください (testWeb は Web サイト全体です)

testWeb
- image
- index.html

実装プロセス:

まず第一に, オンラインで気に入った背景画像を見つけて、画像フォルダーに入れます (解像度はアバターには使用されないので、小さすぎてはなりません! :cat:)

実際には、を使用するだけです。インターネット上の画像リンクを直接接続することができれば問題ありません。

画像を取得したら、コードは次のとおりです。

<!DOCTYPE html>&lthtml lang="en">&lthead>  &ltmeta charset="UTF-8">  &lttitle>Document</title></head>&ltbody></body></html>

ログイン後にコピー

&ltscript type="text/javascript">//产生随机背景图片  var bodyBgs = [];  for (var i = 1; i < 19; i++) {//注意图片数量    bodyBgs[i] = "image/bg"+i+".jpg";  };  var randomBgIndex = Math.round( Math.random() * 18 );//随机获取字符串标识，注意图片数量  document.write('&ltstyle>.bg{width:100%;background:url(');  document.write(bodyBgs[randomBgIndex]);  document.write(');background-size: cover;}</style>');  //上面的三个字符串可以用“+”连接成一个字符串，这里因为位置原因我拆开写了。</script>

ログイン後にコピー