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覆盖半透明black50.png，则代码应该看起来如此像这样：

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

Answer 2

您可以添加更多样式

background-image：url（＆＃34; path.png＆＃34;），url（＆＃34; path.png＆＃34;）; background-repeat：no-repeat，no-repeat;背景位置：顶部中心，底部中心;

双CSS背景IMG无法正常工作

2 个答案: