Question

我正在尝试将此后台更改程序从在编辑后删除实施到我的个人博客，该博客仅驻留在我的计算机上（而不是上传到互联网），但是我不知道js是什么因为是吗？我如何将其添加到我的博客中？我知道有：

<body style="background-image : url();">

稍后在html文件中

后跟：

<img src="" onmouseover="document.body.style.backgroundImage = 'url()';" width="20" height="20">

除了js之外还有其他东西吗？

编辑：看来这仅适用于12x12 gif？当我将自己的图片放入url位置时，bg更改将无效。

第二次编辑：我发现了问题。我的img名称不正确。

Answer 1

这是在div背景上的两个图像之间切换的东西。

let images = ['https://www.gstatic.com/webp/gallery/3.jpg','https://www.gstatic.com/webp/gallery/1.jpg'];
var currentImage = 1;

let myDiv = document.getElementById("myBackground");
myDiv.addEventListener('mouseover', function(event) { 
  currentImage = currentImage == 0 ? 1 : 0;
  event.target.style.backgroundImage = `url('${images[currentImage]}')`;
});

#myBackground {
  background-image: url('https://www.gstatic.com/webp/gallery/1.jpg');
  height: 300px;
  width: 300px;
  border: 2px; solid red;
}

<div id="myBackground"></div>

这是仅使用CSS的版本，但仅限于鼠标悬停，当您离开元素时会重置。

    #myBackground {
      background-image: url('https://www.gstatic.com/webp/gallery/1.jpg');
      height: 300px;
      width: 300px;
      border: 2px; solid red;
    }
    
    #myBackground:hover {
      background-image: url('https://www.gstatic.com/webp/gallery/2.jpg');
    }

<div id="myBackground"></div>

这是一个在鼠标悬停时向CSS添加类的版本。

let myDiv = document.getElementById("myBackground");
myDiv.addEventListener('mouseover', function(event) { 
  event.target.classList.add('myOverride');
});

        #myBackground {
          background-image: url('https://www.gstatic.com/webp/gallery/1.jpg');
          height: 300px;
          width: 300px;
          border: 2px; solid red;
        }
        
        #myBackground.myOverride {
          background-image: url('https://www.gstatic.com/webp/gallery/2.jpg');
        }

<div id="myBackground"></div>

Answer 2

您的代码可以正常工作。不需要任何其他js代码。

Javascript onmouseover背景图片更改

2 个答案: