在background-size: cover之后更改背景图像上的缩放

.element {
  background-image: url("new-image.jpg");
  background-size: cover;
  transition: background-size 0.5s ease;
}

.element:hover {
  background-size: 150%;
}

<div id="element"></div>

<script>
  var element = document.getElementById("element");
  var backgroundImage = "url('new-image.jpg')";
  var originalBackgroundSize = "cover";
  var newBackgroundSize = "150%";

  element.style.backgroundImage = backgroundImage;
  element.style.backgroundSize = originalBackgroundSize;

  element.addEventListener("mouseover", function() {
    element.style.backgroundSize = newBackgroundSize;
  });

  element.addEventListener("mouseout", function() {
    element.style.backgroundSize = originalBackgroundSize;
  });
</script>