CSS圖像覆蓋不到面

Question

我在我的圖像上創建了一個覆蓋圖，以便通過增加對比度來顯示文字。類似於他們如何做到這一點Pablo by Buffer

我想通過調暗圖像來達到類似的效果。但它看起來像我的覆蓋不完全覆蓋整個圖像。

如何覆蓋整個圖像而不是其中的一部分？

我codepen是here：

這裏是CSS我用我的疊加：

.overlay { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    background: rgba(0, 0, 0, 0.5); 
} 

Answer 1

您覆蓋（容器）已填充左15px的/右，這是造成差距，刪除那樣你就能解決這個問題。您可能還需要爲疊加層添加邊框半徑，以匹配後面的圖像。