Div не прозрачный. Текст внутри прозрачный. Это возможно? Как это сделать?

Question

Это то, что я хочу сделать

Помогите мне пожалуйста, я думаю, что это может быть не работает или его просто не достаточно, чтобы сделать

-webkit-text-fill-color: transparent;

Answer 1

Самый лучший способ я знаю, для этого нужно установить тот же фон в элементе контейнера и элемент с текстом в нем. В этом случае для полупрозрачного черного фона вам понадобится элемент, содержащий средний элемент. Вот что я придумал:

div, 
 
aside span { 
 
    background-image: url(http://lorempixel.com/400/400/nature); 
 
} 
 
div { 
 
    width: 400px; 
 
    height: 400px; 
 
} 
 
aside { 
 
    background: rgba(0, 0, 0, 0.7); 
 
    width: 400px; 
 
    height: 200px; 
 
} 
 
aside span { 
 
    display: block; 
 
    font-size: 3em; 
 
    font-family: arial; 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}

<div> 
 
    <aside> 
 
    <span>HERE IS SOME TEXT</span> 
 
    </aside> 
 
</div>

Так что магия является укладка на пролете. Вы были на правильном пути, но нам нужно было иметь этот фон на самом пролете, чтобы мы могли привязать его к тексту.

Это решение работает только в webkit!

Answer 2

Ty для ответа, 1+ от меня, но так как я хочу, чтобы фон был полностью независим от текста, я придумал это простое решение и как «обойти проблему».

Вместо того, чтобы делать текст внутри div, я буду приветствовать изображение GIF, где определенные пиксели будут прозрачными (или уже не существующими).