Thêm bóng đổ vào văn bản trong suốt với CSS

Question

Có cách nào để thêm một bóng thả vào văn bản trong suốt để nền phía sau văn bản vẫn hiển thị? Có lẽ một số cách để sử dụng văn bản chính nó như là một mặt nạ? Hoặc chế độ hòa trộn văn bản (với hỗ trợ trình duyệt chéo hợp lý)?

nỗ lực ngây thơ của tôi:

span { 
 
    background-image: url(http://i.imgur.com/EWDVnfb.png); 
 
    color: #FFF; 
 
    font-family: sans-serif; 
 
    font-size: 100pt; 
 
    font-weight: bold; 
 
    line-height: 2em; 
 
    padding: .5em; 
 
    text-shadow: 0 0 .5em #F00; 
 
}

<span>Test</span>

Answer 1

Dưới đây là một giải pháp mà hoạt động trên Chrome và Safari:

Fiddle

Về cơ bản, ý tưởng là phải có 2 div cường điệu trên nhau. Phần dưới cung cấp nền và bóng. Và div trên chỉ sử dụng một mặt nạ để cắt ra cùng một văn bản chính xác từ hình nền, do đó nó bao gồm các văn bản của nguyên tố thấp hơn, nhưng không phải là cái bóng:

div { 
    position:absolute; 
    top:0; 
    left:0; 
    background-image: url(http://i.imgur.com/EWDVnfb.png); 
    font-family: sans-serif; 
    font-size: 100pt; 
    font-weight: bold; 
    line-height: 2em; 
    padding: .5em; 
} 
div.shadow { 
    color: #fff; 
    text-shadow: 0 0 .5em #F00; 
} 
div.text { 
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text; 
} 

EDIT

Tôi chỉ tìm thấy một wonderful article on css-tricks.com Vì vậy, có vẻ như là một giải pháp hỗ trợ trình duyệt tốt hơn nhiều. Ý tưởng là để thay thế đầu lớp div bởi và svg chứa cùng một văn bản và sử dụng một mô hình để điền vào văn bản với hình nền, đây là một phác thảo:

<div class="shadow">Test</div> 
<div> 
    <svg width="400" height="200"> 
     <pattern id="mask" patternUnits="userSpaceOnUse" 
      width="400" height="200" viewbox="0 0 400 200"> 
      <image xlink:href="..." width="300" height="300" /> 
     </pattern> 
     <text x="0" y="1em">Test</text> 
    </svg> 
</div> 

CSS (ngoài các CSS của tôi ở trên giải pháp):

text { 
    fill:url(#mask); 
} 

Tôi cũng đang cố gắng làm việc này, với một phần thành công. (DEMO) Nhưng tôi không giỏi lắm với svg và ai đó có thể sửa nó. Dù sao, điểm yếu ở đây là việc định vị chính xác và đáng tin cậy này là một nỗi đau thực sự trong khi bạn nhận được điều đó một cách tự động ngay với giải pháp duy nhất của Webkit.