如何在 hover 上使用深色疊加背景的圖像上疊加透明文本？

Question

標題有點拗口。 我剛剛開始使用 CSS 並試圖實現文本覆蓋的效果，而圖像在文本后面仍然是透明的。

下面是我通過將我找到的各種代碼片段剪在一起而設法實現的目標。 我正在努力使深色疊加層與圖像大小相同。 我沒有在疊加層或圖像上使用任何邊距或填充，所以不知道為什么會發生這種情況。 我還嘗試了幾種對齊文本的方法，使其垂直位於中間，但沒有這樣的運氣。

 .image-container { position: absolute; width: 200px; height: 200px; border-radius: 50%; }.border { border-radius: 50%; }.image-container.after { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: none; color: #FFF; border-radius: 50%; }.image-container:hover.after { display: block; background: rgba(0, 0, 0, .6); border-radius: 50%; } #title { background: url('https://bopepor.es/wp-content/uploads/2018/08/Logo-200x200PX.png'); background-size: cover; color: #fff; -webkit-text-fill-color: transparent; -webkit-background-clip: text; padding: 0; display: flex; } h1 { font-size: 80px; font-family: sans-serif; text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, .1); margin: 0; padding: 0; letter-spacing: -1px; line-height: 0.8; }

 <div class="image-container"> <img src="https://bopepor.es/wp-content/uploads/2018/08/Logo-200x200PX.png" class='border' /> <div class="after"> <div id="title"> <h1><b>ONE<br>TWO</b></h1> </div> </div> </div>

Answer 1

1. 對於第一個問題，您將無法將疊加層置於圖像的中心，因為圖像實際上不是 200 像素 x 200 像素，因為圖像周圍有透明像素。 所以首先裁剪圖像周圍的透明像素並獲得它的真實尺寸。 然后把下面css中的200px大小替換成合適的大小。

2. 我已經更正了您的代碼片段，以便能夠通過添加display: flex和align-content: center （用於垂直對齊）和justify-content: center （用於水平對齊）來使文本居中，

3. 我還添加了overflow: hidden到.image-container.after以防止溢出的文本並將文本大小更改為60px以獲得更好的可見性。

 .image-container { position: absolute; width: 200px; height: 200px; border-radius: 50%; }.image-container.after { position: absolute; display: none; left: 0; bottom: 0; overflow: hidden; color: #FFF; }.image-container:hover.after { display: flex; background: rgba(0, 0, 0, 0.6); border-radius: 50%; border-width: 0px; width: 200px; height: 200px; } #title { background: url('https://bopepor.es/wp-content/uploads/2018/08/Logo-200x200PX.png'); background-size: cover; color: #fff; -webkit-text-fill-color: transparent; -webkit-background-clip: text; padding: 0; display: flex; align-content: center; justify-content: center; width: 100%; } h1 { font-size: 60px; font-family: sans-serif; text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, .1); margin: 0; padding: 0; display: flex; align-items: center; letter-spacing: -1px; line-height: 0.8; }

 <div class="image-container"> <img src="https://bopepor.es/wp-content/uploads/2018/08/Logo-200x200PX.png" class='border' /> <div class="after"> <div id="title"> <h1><b>ONE<br>TWO</b></h1> </div> </div> </div>