2、编写代码，页面加载后div中的背景图片透明度逐渐发生变化，同时图片的宽度、高度逐渐加大，当增加至一定程度（400、300）后再次恢复原始大小（300、200），重复这个过程。

以下是一个简单的实现该效果的示例代码：

HTML代码：

<div id="bg-img"></div>

CSS代码：

#bg-img {
  width: 300px;
  height: 200px;
  background-image: url('your-image-url');
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
#bg-img::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

JavaScript代码：

const bgImg = document.getElementById("bg-img");
let width = 300;
let height = 200;
let opacity = 0.5;

setInterval(() => {
  width += 10;
  height += 10;
  opacity -= 0.01;
  if (width >= 400 || height >= 300) {
    width = 300;
    height = 200;
    opacity = 0.5;
  }
  bgImg.style.width = `${width}px`;
  bgImg.style.height = `${height}px`;
  bgImg.style.opacity = opacity;
}, 50);

代码解释：

首先，在HTML中创建一个id为“bg-img”的空div，用于显示背景图片。

然后，在CSS中设置该div的初始宽度为300px，高度为200px，并且设置背景图片的URL、重复方式和大小。为了让背景图片逐渐变透明，我们在该div上使用了伪元素::before，并设置其背景色为黑色，透明度为0.5。

最后，在JavaScript中，我们使用setInterval函数来定期执行一个函数。该函数每次将背景图片的宽度和高度增加10px，同时将透明度减少0.01。当宽度或高度增加到一定程度时（这里是400px和300px），我们将宽度和高度重置为初始值300px和200px，并将透明度重置为0.5。最后，我们通过设置div的样式属性来实现背景图片的渐变效果。