如何在鼠标悬停时在CSS背景图像上创建缩小效果？

在CSS中，可以使用transform属性和transition属性来实现在鼠标悬停时在背景图像上创建缩小效果。

首先，需要为元素设置一个背景图像，可以使用background-image属性。然后，通过background-size属性设置背景图像的大小，可以使用cover值来保持图像比例并填充整个元素。

接下来，使用transform属性来缩小背景图像。可以使用scale函数来指定缩放比例，例如transform: scale(0.8)表示将图像缩小为原来的80%。

为了实现平滑的过渡效果，可以使用transition属性来设置过渡时间和过渡效果。例如，transition: transform 0.3s ease表示在0.3秒内以平滑的方式过渡transform属性的值。

最后，使用:hover伪类选择器来定义鼠标悬停时的样式。在:hover中，将transform属性的值设置为scale(1)，表示恢复到原始大小。

下面是一个示例代码：

.element {
  background-image: url("背景图像地址");
  background-size: cover;
  transition: transform 0.3s ease;
}

.element:hover {
  transform: scale(0.8);
}

在上面的代码中，将.element替换为你要应用效果的元素的选择器，将背景图像地址替换为你要使用的背景图像的URL。

这样，在鼠标悬停时，背景图像就会缩小为原来的80%。你可以根据需要调整缩放比例和过渡效果的时间。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云CSS背景图像相关产品