HTML/CSS: Văn bản "Xem qua nền"?

Question

Ok, điều này có thể thực hiện được không.

Tôi có hình nền. Trên hết, tôi có một hộp màu xám trong suốt cho nội dung. Tôi muốn có tiêu đề ở trên cùng trong văn bản, về cơ bản là các chữ cái phơi bày nền. Vì vậy, văn bản sẽ xóa hộp màu xám và cho phép nền hiển thị qua.

Cách hacky duy nhất tôi có thể thấy là tạo một hình ảnh với các chữ cái trong suốt trên nền có cùng màu xám, và sau đó cố gắng căn chỉnh bằng cách nào đó với hộp màu xám.

Có cách nào khác - tốt hơn không?

Answer 1

Một cách là sử dụng -webkit-background-clip: text;: demo here (chỉ webkit rõ ràng).

Sử dụng vị trí, chúng ta có thể đồng bộ hóa cả hai nền tảng:

#container, #container h1 { 
    background: url(bg.png) 
} 

#container { 
    position: relative; 
} 

#container #gray { 
    background: rgba(0,0,0,.8); 
    padding-top: 8em; 
} 

#container h1 { 
    font-size: 8em; 
    padding-top: /* padding + border of div */; 
    position: absolute; 
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text; 
}​ 

Hoặc bạn có thể sử dụng phương pháp tương tự và áp dụng một svg mask, mà sẽ làm việc trong tất cả các trình duyệt hiện đại.