Javascript css背景图像动画

是否有方法仅在背景图像上使用

transform:scale（）

我想做的是在

悬停

上放大背景

html

所以我不希望内容只缩放悬停时的背景图像

如果有人知道我能做到这一点，那就太好了

---

谢谢

如果只是背景大小，并且初始值不依赖于“cover”或“contain”，那么在悬停时更改背景大小就足够了

如果不是，则将伪元素与背景堆叠，同时保持元素背景透明，然后在伪元素上使用变换即可

编辑：添加示例：）

.集装箱{
溢出：隐藏；
位置：相对位置；
}
.scalable bg:：before{
内容：“；
背景：url（'http://lorempixel.com/600/400');
背景尺寸：封面；
位置：绝对；顶部：0；左侧：0；
宽度：100%；高度：100%；
z指数：-1；
过渡：所有的1容易；
}
.可扩展bg{
填料：2米；
颜色：白色；文本阴影：2px2p0黑色；
}
.scalable bg:hover:：before{
变换：尺度（2）；
}
某物

某物，某物，某物，暗处。某物，某物，完整

看到了吗？您是否尝试过设置动画？

<div class="square">
    //Content in here
</div>

.square{
background: url('image goes here');
background-size: cover;
height: 50vw;
width: 50vw;

<style>
.container{
  overflow:hidden;
  position:relative;  
}

.scalable-bg::before{
  content:"";
  background:url('http://lorempixel.com/600/400');
  background-size:cover;
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  z-index:-1;
  transition:all 1s ease;
}

.scalable-bg{
  padding:2em;
  color:white; text-shadow: 2px 2px 0 black;
}

.scalable-bg:hover::before {
  transform: scale(2);
}
</style>
<div class="container">
  <div class="scalable-bg">
    <h1>
      Something
    </h1>
    <p>
    Something, something, something, darkside. Something, something, complete
    </p>
  </div>
</div>