多背景主页答案

【问题标题】：Multi-background home page多背景主页
【发布时间】：2014-12-22 06:01:23
【问题描述】：

首页每天可以设置不同的背景图片吗？就像今天是第一张图片，明天是第二张图片，下一个明天是第三张图片。我一直在研究护目镜，但找不到多背景循环或 CSS 循环。

.bgImage {
background: url('../img/HighCityA.jpg') 20% 20% / cover transparent;    --Today
/*  background: url('../img/HighCityB.jpg') 20% 20% / cover transparent;*/ --Tomorrow
/*  background: url('../img/HighCityC.jpg') 20% 20% / cover transparent;*/  --Tuesday
/*  background: url('../img/HighCityD.jpg') 20% 20% / cover transparent;*/  --Wed
  width: 100%;
  height: 800px;
  margin-top: -87px;
  position: absolute;
  top: 19%;
  left: 0px;
  z-index: -1
}

有什么建议吗？

【问题讨论】：

您需要 JavaScript 来执行此操作。
@chipChocolate.py 是正确的！试试这个stackoverflow.com/questions/21760208/…
哦，好的，我会检查那个，谢谢你们俩。
@chipCholcate.py，你有 JavaScript 的例子吗？

标签： html css

【解决方案1】：

您需要遍历样式表规则，找到.bgImage 的规则并根据日期更改其background 属性。

.getDay() 返回一个从0(Sunday) 到6(Saturday) 的数字。

var day = new Date().getDay();
var ss = document.styleSheets;

for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == ".bgImage") {
      r.style.backgroundPosition = '20% 20%';
      r.style.backgroundSize = 'cover';
      r.style.backgroundColor = 'transparent';
      // Sunday
      if (day == 0) {
        r.style.backgroundImage = 'url(../img/HighCityA.jpg)';
      }
      // Monday
      else if (day == 1) {
        r.style.backgroundImage = 'url(../img/HighCityB.jpg)';
      }
      // Tuesday
      else if (day == 2) {
        r.style.backgroundImage = 'url(../img/HighCityC.jpg)';
      }
      // Wednesday
      else if (day == 3) {
        r.style.backgroundImage = 'url(../img/HighCityD.jpg)';
      }
    }
  }
}

您可以将此代码简化为：

var day = new Date().getDay();
var ss = document.styleSheets;

for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == ".bgImage") {
      r.style.backgroundPosition = '20% 20%';
      r.style.backgroundSize = 'cover';
      r.style.backgroundColor = 'transparent';
      r.style.backgroundImage = day == 0 ? 'url(../img/HighCityA.jpg)' : day == 1 ? 'url(../img/HighCityB.jpg)' : day == 2 ? 'url(../img/HighCityC.jpg)' : day == 3 ? 'url(../img/HighCityD.jpg)' : ''
    }
  }
}

工作示例

为了快速演示，我使用了backgroundColor 而不是backgroundImage。

var day = new Date().getDay();
var ss = document.styleSheets;

for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == ".bgImage") {
      r.style.backgroundPosition = '20% 20%';
      r.style.backgroundSize = 'cover';
      //.style.backgroundColor = 'transparent';
      r.style.backgroundColor = day == 0 ? 'black' : day == 1 ? 'red' : day == 2 ? 'blue' : day == 3 ? 'green' : ''
    }
  }
}

.bgImage {
  width: 100%;
  height: 800px;
  margin-top: -87px;
  position: absolute;
  top: 19%;
  left: 0px;
  z-index: -1
}

&lt;div class="bgImage"&gt;&lt;/div&gt;

【讨论】：

美丽，这意味着“day == 1 ? 'red'” 即今天，明天将是蓝色的。我会用各种背景颜色或背景图像添加更多天数，最多 6 天，对吗？
@Carter - 是的，没错！
太棒了，它确实帮助了我很多。我将重点介绍这部分以及这里的许多示例。我有点不知所措，大声笑。
快速问题 - 我在 HTML 文件中添加了 Javascript 脚本标签，但没有任何响应。请参阅codePen Example。不知道少了什么。
@Carter - Here is what it should look like.

【解决方案2】：

您可以使用 Javascript 来执行此操作。例如，您可以使用以下 JavaScript 代码获取当前日期：

var today = new Date();
var dd = today.getDate();

然后，您可以根据月份的日期相应地设置背景图像。例如你可以这样做：

var str1 = "url('http://www.yoururl.com/pathToImages/backgroundN.jpeg')";
document.getElementById("IdOfDivYouWantToStyle").style.backgroundImage = str1 ;

然后您可以根据月份动态设置“backgroundN.jpeg”。您甚至可以让源代码保持不变，只需更改文件夹中的图片即可。

【讨论】：

读完你的例子后，想知道我应该用什么代替 ""IdOfDivYouWantToStyle"？
只要给它你想要改变背景的 HTML 元素的 ID，例如
标签或你的 body 标签或任何你想设置样式的标签。

【解决方案3】：

你可以试试这样的jquery/javascript；

var date = new Date();
var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

var weekday = weekdays[date.getDay()];
if(weekday=='Monday'){
$('.bgImg').css('background-image', 'url(' + monday_imageUrl + ')');
}else if(weekday=='Tuesday'){
$('.bgImg').css('background-image', 'url(' + tuesday_imageUrl + ')');
}

...

【讨论】：

感谢 Debasish 提供另一个示例！

【解决方案4】：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(window).load(function() {          
  var i =0;
  var images = ['image2.png','image3.png','image1.png'];
  var image = $('#slideit');
                //Initial Background image setup
  image.css('background-image', 'url(image1.png)');
                //Change image at regular intervals
  setInterval(function(){  
   image.fadeOut(1000, function () {
   image.css('background-image', 'url(' + images [i++] +')');
   image.fadeIn(1000);
   });
   if(i == images.length)
    i = 0;
  }, 5000);           
 });
</script>
</head>
<body>
      <div id="slideit" style="width:700px;height:391px;"> 
      </div>
</body>
</html>

试试这个。我相信这会奏效。这例如用于每 5 秒后更改图像。尝试根据需要设置它！

【讨论】：

谢谢 Avnish！我通过codePen从谷歌发现它非常相似，但我真的很喜欢它。我更喜欢每 5 秒换几天，这样不那么烦人。
欢迎@Carter！如果您愿意，也可以在 31536000 秒内使用它。另外，chipChocolate.py 的答案也很好！

【解决方案5】：

var day = new Date().getDay();
var ss = document.styleSheets;

for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == ".bgImage") {
      r.style.backgroundPosition = '20% 20%';
      r.style.backgroundSize = 'cover';
      //.style.backgroundColor = 'transparent';
      r.style.backgroundColor = day == 0 ? 'black' : day == 1 ? 'red' : day == 2 ? 'blue' : day == 3 ? 'green' : ''
    }
  }
}

.bgImage {
  width: 100%;
  height: 800px;
  margin-top: -87px;
  position: absolute;
  top: 19%;
  left: 0px;
  z-index: -1
}

&lt;div class="bgImage"&gt;&lt;/div&gt;

【讨论】：