Html 当图像悬停时，显示背景色

我希望在悬停图像时显示背景色，因此我将图像的不透明度设置为1，背景色设置为1，在悬停图像时不透明度设置为0.5，以便显示背景色。但是背景色没有出现

。文章预览图像img{
背景色：#58b253！重要；
}
.文章预览图像img{
不透明度：1！重要；
-webkit转换：.3s轻松输入输出！重要；
过渡：.3s轻松进出！重要；
}
.文章预览图片：悬停图片{
不透明度：0.5！重要；
}

如果您想包含多个类别，那么只需插入逗号和ID号来添加另一个ID即可。例如，这将显示类别11和类别14



如果您想包含多个类别，那么只需插入逗号和ID号来添加另一个ID即可。例如，这将显示类别11和类别14

在图像容器上设置背景色，而不是在图像上设置背景色

当图像悬停时，应用不透明度，这将使图像透明，并且可以看到容器上的背景色

.article-preview-image {
    display: inline-block; /* element takes content width */
    background-color: red; /* for demo purposes */
}
.article-preview-image img {
   transition: .3s ease-in-out;
}
.article-preview-image:hover img {
   opacity: 0.5;
}