21xrx.com
2024-09-17 04:17:21 Tuesday
登录
文章检索 我的文章 写文章
如何用Javascript制作图片背景
2023-06-10 08:46:58 深夜i     --     --
Javascript 图片作为背景 CSS样式

最近在开发一个网页时,想要用一张图片作为页面背景。经过查阅资料,我发现可以用一些Javascript代码实现这个效果。

首先我将背景图片准备好,然后在HTML中创建一个div,并将其设置为网页的整个背景,代码如下:



接下来,我使用Javascript获取网页的宽高并将其赋给div的样式,从而使div成为整个网页的背景。具体代码如下:

script

var winWidth = window.innerWidth; // 获取网页宽度

var winHeight = window.innerHeight; // 获取网页高度

var bg = document.getElementById('bgImage'); // 获取背景div

bg.style.width = winWidth + 'px'; // 将宽度设置为网页宽度

bg.style.height = winHeight + 'px'; // 将高度设置为网页高度

最后,在CSS中将背景图片设置为div的背景即可,代码如下:

ss

#bgImage {

 background-image: url('/images/bg.jpg');

 background-size: cover;

 background-repeat: no-repeat;

}

这样,我就成功地用一张图片作为整个网页的背景了!

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复
    相似文章