html - 双CSS背景图片无法正常工作

我的网站还有另一个问题。我想将悬停时的透明PNG添加到我的元素之一，但是我无法完成它。这是代码：

HTML：

<a class="item elipsis" href ="https://michalgrochowski.github.io/elipsis---flex/" target="_blank">
<p>PSD to HTML</p>
<p>Flexbox</p>
<p>Fixed heights and widths</p>
 </a>

和CSS：

.elipsis {
    display: block;
    background-image: url("../img/elipsis.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: all .3s ease-in-out;
}
.elipsis:hover {
    background-image: url("../img/elipsis.png"), url("../img/black50.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

为什么不想工作？

最佳答案

需要位于最上方的背景图片应位于background-image值的第一位，因此，如果要让elipsis.png被半透明的black50.png覆盖，代码应如下所示：

background-image: url("../img/black50.png"), url("../img/elipsis.png");

关于html - 双CSS背景图片无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41715934/