菜单

背景图片铺满body

2020年4月9日 - 新闻中心

本文实例为大家分享了JavaScript实现更换背景图片的具体代码,供大家参考,具体内容如下

背景图片铺满body,铺满body

 添加背景图片: 

图片 1

 

添加样式代码如下:

<style type=”text/css”>
body {
background: url(“image/bg.jpg”) top center no-repeat;
background-size: cover;
}
</style>

 

最终效果如下图所示:图片 2

 

添加背景图片:
添加样式代码如下: style type=”text/css” body { background:
url(“image/bg.jpg”) top center no-repeat; background-…

主要通过Js控制行内样式,达到更换背景图片的目的

效果:

代码:

  更换背景  *{ margin: 0; padding: 0; } body{ background: url no-repeat; background-size: 600px; } ul{ list-style: none; } ul li{ width: 80px; height: 50px; border: 1px solid #222; float: left; margin: 10px; } ul li img{ width: 80px; height: 50px; cursor: pointer; }   window.onload = function(){ var imgs = document.getElementsByTagName; for (var i = 0; i &lt; imgs.length; i++) { imgs[i].onclick = function(){ document.body.style.background = "url no-repeat";//&#36890;&#36807;js&#25511;&#21046;&#25913;&#21464;&#34892;&#20869;&#26679;&#24335; document.body.style.backgroundSize = "600px"; } } }    

注意:

正确写法: document.body.style.background = “url no-repeat”;

错误写法: document.body.style.background = “this.src“ no-repeat;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图