ダブルCSS背景IMGが動作しない

Question

私のサイトに別の問題があります。私は自分の要素の1つに透明な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: url("../img/black50.png"), url("../img/elipsis.png"); 

Answer 1

上にする必要があります背景画像は、background-image値に最初に来る必要がありますより多くのスタイルを追加できます。

background-image：url（ "path.png"）、url（ "path.png"）; background-repeat：no-repeat、no-repeat;バックグラウンドポジション：トップ センター、ボトムセンター;

Answer 2

あなたを：あなたはelipsis.pngのコードは次のようになります。半透明のblack50.pngでカバーしたいので、もし