html - CSS:将背景图像添加到:具有淡入淡出效果的伪元素之后

Question

#gallery div::after {
    content: "";
    position: absolute;
    top: 0;
}
#gallery div:hover::after {
    background-image: url("files/img/plus.jpg") !important;
    background-repeat: no-repeat;
    height: 83px;
    right: 0;
    width: 83px;
    transition: background 1300ms ease-in 2s;
}
#gallery a:nth-child(1) div {
    background-image: url("files/img/bio/1.jpg");
    background-size: cover;
    height: 240px;
    position: relative;
    width: 240px;
}

我正在尝试向 plus.jpg background-image 添加淡入淡出效果，在 hover 上应用于 ::after 伪元素.如您所见，我尝试了 transition: background 1300ms ease-in 2s 但没有任何反应..

Here您可以实时查看代码(是包含 9 张图片的图库。

Answer 1

背景图像无法转换。但由于它只是一个简单的加号，我建议使用 ff:

#gallery div::after {
background-color: #ddaa44;
color: white;
content: "+";
display: block;
font: 44px/44px verdana;
opacity: 0;
padding: 26px;
position: absolute;
right: 0;
top: 0;
}

#gallery div:hover::after {
opacity: 1;
transition: all 0.2s ease-in-out 0s;
}