页眉和页脚之间的随机响应背景图像？答案

【问题标题】：Randomized Responsive Background Image between Header and Footer?页眉和页脚之间的随机响应背景图像？
【发布时间】：2015-12-22 06:36:59
【问题描述】：

我需要在我的网站的页眉和页脚之间添加一个响应式背景图片，但我还需要让背景图片在每次页面加载时随机变化（从 5 个不同的图片中选择）。

关于如何实现这一点的任何帮助？

这是我目前得到的，减去页眉和页脚之间的背景图像。

<body>
  <header style="position: static;">
     <div class="wrapper">
        <div class="logo"><a href="home.html"><img src="images/sh_logo3.png" /></a></div>
        <nav id="nav" role="navigation">
           <a href="#nav" title="Show navigation">Show navigation</a>
           <a href="#" title="Hide navigation">Hide navigation</a>
           <ul>
              <li><a href="home.html" aria-haspopup="true">HOME</a></li>
              <li><a href="shop.html" aria-haspopup="true">SHOP</a></li>
              <li><a href="about.html" aria-haspopup="true">ABOUT</a>
              <li><a href="sizing.html">SIZING</a></li>
              <li><a href="video.html">VIDEO</a></li>
              <li><a href="press.html">PRESS</a></li>
              <li><a href="social.html">SOCIAL</a></li>
              <li><a href="contact.html">CONTACT</a></li>
           </ul>
        </nav>
     </div>
  </header>
  <div class="hero">
     <!-- BACKGROUND IMAGE HERE -->
  </div>
  <div>
     <p style="text-align: center; font-size: 0.9em; font-weight: 400; color: #FAEDE8; letter-spacing: 1px; padding: 2px;">FREE SHIPPPING ON ALL ORDERS</p>
  </div>
  <footer>
     <div class="foot-wrap">
        <div class="foot-list-left">
           <ul>
              <li><a href="privacy.html">PRIVACY POLICY</a></li>
              <li><a href="terms.html">TERMS OF USE</a></li>
              <li><a href="customer.html">CUSTOMER SERVICE</a></li>
              <li><a href="orders.html">ORDERS</a></li>
              <li><a href="returns.html">RETURN POLICY</a></li>
           </ul>
        </div>
        <div class="foot-list-right">
           <ul>
              <li>© 2015 SUMMERHEART</li>
           </ul>
        </div>
     </div>
  </footer>
</body>

任何帮助将不胜感激！

【问题讨论】：

stackoverflow.com/questions/28688925/… stackoverflow.com/questions/8827691/… stackoverflow.com/questions/30854827/… - 欺骗问题：google.co.uk/…

标签： javascript html css responsive-design background-image

【解决方案1】：

我将创建一个包含每个可能图像的 Javascript 数组，然后使用 Math.random（使用 Math.round 舍入为整数）在每次加载页面时选择其中一个。使用 jQuery 将图像附加到“英雄”元素的示例：

var images = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg'];
var randomNumber = Math.round(Math.random() * (images.length - 1));

$('.hero').append('<img src="' + images[randomNumber] + '">');

Math.random 方法创建一个随机数（在本例中介于 0 和 5 之间，但它会根据图像数组的大小进行缩放）。然后使用它在每次页面加载时随机访问数组中的条目。然后它会附加这个随机选择的图像。

【讨论】：