Fatal编程技术网
  • html/
  • Html 多背景主页

Html 多背景主页

html css

Html 多背景主页,html,css,Html,Css,是否可以在主页上为每日设置不同的背景图片？就像今天是第一个图像，明天是第二个图像，下一个明天是第三个图像。我一直在研究护目镜，但找不到CSS的多背景循环或循环 .bgImage { background: url('../img/HighCityA.jpg') 20% 20% / cover transparent; --Today /* background: url('../img/HighCityB.jpg') 20% 20% / cover transparent;*/ --To

是否可以在主页上为每日设置不同的背景图片？就像今天是第一个图像，明天是第二个图像，下一个明天是第三个图像。我一直在研究护目镜，但找不到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
}
有什么建议吗

您需要循环浏览样式表规则，找到.bgpimage的规则，并根据日期更改其背景属性

.getDay返回从0星期天到6星期六的数字

.bgImage{ 宽度：100%； 高度：800px； 边缘顶部：-87px； 位置：绝对位置； 最高：19%； 左：0px； z指数：-1 }
您可以使用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。您甚至可以让源代码保持不变，只需更改文件夹中的图片即可

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 + ')');
}

试试这个。我相信这会奏效的。此eg用于每5秒更改一次图像。试着把它设置成你想要的样子

您需要JavaScript来执行此操作。@chipChocolate.py是正确的！试试这个哦，好的，我会检查那个，谢谢你们两个。@chipCholcate.py，你们有JavaScript的例子吗？读了你们的例子之后，只是想知道我应该用什么来代替IDOFDIVYOUWANTOTOSTYLE？只要给它一个HTML元素的Id，你想改变它的背景，例如一个标记或你的body标记，或者你想设置样式的任何东西。Beautiful，这意味着day==1？“今天是红色，明天是蓝色。我会用不同的背景颜色或背景图像增加最多6天的时间，对吗？@Carter-是的，没错！太棒了，它确实帮了我很多。我将重点介绍这一部分和这里的许多例子。我有点不知所措，哈哈。快速提问-我在HTML文件中添加了Javascript脚本标记，但没有任何响应。请看。不知道少了什么。@Carter-。谢谢Debasish再举一个例子！谢谢你，阿文什！我通过codePen在谷歌上发现了非常相似的东西，但我真的很喜欢它。我更喜欢每5秒钟换一天，这样就不那么烦人了。哦，欢迎@Carter！如果你也愿意的话，你可以在31536000秒内使用它。另外，chipChocolate.py答案很好！ 
var str1 = "url('http://www.yoururl.com/pathToImages/backgroundN.jpeg')";
document.getElementById("IdOfDivYouWantToStyle").style.backgroundImage = str1 ;

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 + ')');
}

<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>