有没有一种比我写的更简洁的方式，让背景图像具有一定的不透明度，然后有悬停效果？

有，可以使用CSS的opacity属性来设置背景图像的不透明度，然后使用CSS的:hover伪类来实现悬停效果。

具体步骤如下：

1. 在HTML中添加一个具有背景图像的元素，例如一个div元素。
2. 使用CSS的background-image属性来设置背景图像的URL。
3. 使用CSS的opacity属性来设置背景图像的不透明度，取值范围为0到1，其中0表示完全透明，1表示完全不透明。
4. 使用CSS的:hover伪类来设置鼠标悬停时的样式。
5. 在:hover伪类中使用CSS的opacity属性来设置背景图像的不透明度为另一个值，以实现悬停效果。

示例代码如下： HTML:

<div class="background-image"></div>

CSS:

.background-image {
  background-image: url("背景图像的URL");
  opacity: 0.5; /* 设置背景图像的不透明度为0.5 */
  width: 300px;
  height: 200px;
}

.background-image:hover {
  opacity: 1; /* 鼠标悬停时设置背景图像的不透明度为1，即完全不透明 */
}

这样，背景图像就具有一定的不透明度，并且在悬停时会有变化效果。