圖片覆蓋...只有在真實圖片的區域，而不是圖片的背景

Question

我是一名學生，目前忙於創建自己的網站，但現在我有一個問題，弄清楚我自己。 我的網站是關於職業自行車的，我會在用鼠標翻閱時想要覆蓋的球隊的球衣。我知道了，但現在發生了，如果我用鼠標移動它，一個大方形覆蓋圖片（因爲它是一個帶有透明背景的方形圖片），我希望只有一個覆蓋澤西島的覆蓋層，沒有超過圖片的「背景」。

我希望你能幫助我！需要解決這個問題！ 預先感謝您！

.container { 
 
    position: relative; 
 
    width: 25%; 
 
    height: auto; 
 
} 
 
.image { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.overlay { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: #00b0f0; 
 
    opacity: 0.8; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 0; 
 
    transition: .5s ease; 
 
} 
 
.container:hover .overlay { 
 
    height: 100%; 
 
} 
 
.text { 
 
    white-space: nowrap; 
 
    color: white; 
 
    font-size: 20px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
}

<div class="container"> 
 
    <a href="AG2R.html"> 
 
    <img src="https://i.stack.imgur.com/7839q.png" alt="AG2R La Mondiale" title="AG2R La Mondiale" class="image"> 
 
    </a> 
 
    <div class="overlay"> 
 
    <div class="text">AG2R La Mondiale</div> 
 
    </div> 
 
</div>

Answer 1

我發現了一個relevant Stack Overflow thread這裏的共識是，除非你想用的過濾器了純黑色的圖像做，這是無法實現的CSS - 這是不是在所有的瀏覽器兼容，不會有您已實施的滑動轉換。

因此，我選擇告訴你，如果你自己在Photoshop中創建藍色疊加層作爲單獨的PNG圖像並與它們進行轉換，看起來如何。我通過填充#00b0f0來創建the PNG，將其設置爲80％的不透明度，並將其用作剪貼蒙版 - 本質上是您的.overlay正在嘗試執行的操作。這裏有一個演示：

.container { 
 
    position: relative; 
 
    width: 25%; 
 
    height: auto; 
 
} 
 
.image { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.overlay { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    opacity: 0.8; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 0; 
 
    transition: .5s ease; 
 
} 
 
.overlay .image { 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 
.container:hover .overlay { 
 
    height: 100%; 
 
} 
 
.text { 
 
    white-space: nowrap; 
 
    color: white; 
 
    text-shadow: #000 0 1px 1px; 
 
    font-size: 20px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
}

<div class="container"> 
 
    <a href="AG2R.html"> 
 
    <img src="https://i.stack.imgur.com/7839q.png" alt="AG2R La Mondiale" title="AG2R La Mondiale" class="image"> 
 
    </a> 
 
    <div class="overlay"> 
 
    <img src="https://i.stack.imgur.com/DwIGH.png" alt="overlay" class="image" /> 
 
    <div class="text">AG2R La Mondiale</div> 
 
    </div> 
 
</div>