Cần giúp đỡ về ảnh background css

[NTD (Nguyễn Thế Sơn)]

Làm phiền mọi người nếu biết thì giúp em với ạ. Ảnh bên trái là yêu cầu bên file photoshop, bên phải là ảnh được cho sẵn. Mọi người biết làm sao để ra được kết quả như bên ảnh trái không. Output: Ảnh bị đậm lên, nhưng chữ OCEAN phải giữ nguyên màu của nó không bị đậm theo. Em cảm ơn mọi người đã đọc bài viết ạ.

[LocNguyenXuan99 (Loc)]

Có 2 cách làm:
cách 1: dùng filter brightness

img {
  filter: brightness(50%);
}

Cách 2: dùng overlay

<div class='container'>
    <img  src="pineapple.jpg" width="300" height="300">
    <div class="background-overlay" > </div>
    <div class="text" >OCEAN</div>
</div>
<style>
.container {
 position: relative;
 overflow: hidden;
 margin: 0;
 padding: 0;
}
.background-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.7) 100%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.container .text {
  font-size: 28px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
</style>

Với cách thứ 2, có thể dùng gradient để thay đổi độ sáng tối từng vùng của background.

[NTD (Nguyễn Thế Sơn)]

Vâng em cảm ơn sự giúp đỡ của anh ạ. Em sẽ tham khảo.