html - 双 CSS 背景图像不起作用

Question

我的网站还有另一个问题。我想在悬停时将透明 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;
}

为什么它不想工作？

Answer 1

需要放在最上面的背景图片应该在 background-image 值中排在第一位，所以如果你想让 elipsis.png 被半覆盖transparent black50.png 代码应该是这样的:

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