Текст, который нужно обрезать маску фона Div

-1

Принесите мне это ... немного трудно объяснить. Поэтому я пытаюсь сделать блок текста, удалив фон div непосредственно за ним. Изображение, связанное ниже, было сделано Illustrator, и теперь я пытаюсь найти решение в HTML & CSS.Текст, который нужно обрезать маску фона Div

Illustrator screenshot of what I'm trying to accomplish

.grid-item { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 200px; 
 
    padding: 5px; 
 
} 
 

 
.grid-container { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #eee; 
 
} 
 

 
.grid-container img { 
 
    position: absolute; 
 
} 
 

 
.grid-item-overlay { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 5px; 
 
    bottom: 5px; 
 
    right: 5px; 
 
    background-color: rgba(0,0,0,0.5); 
 
} 
 

 
span { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 100%; 
 
    transform: translate(-50%, -50%); 
 
    font-weight: 700; 
 
    font-family: sans-serif; 
 
    font-size: 40px; 
 
    text-align: center; 
 
    color: #fff; 
 
}

<div class="grid-item"> 
 
    <div class="grid-container"> 
 
    <img src="https://unsplash.it/300/200/?random"> 
 
    <div class="grid-item-overlay"> 
 
     <span>Text Here</span> 
 
    </div> 
 
    </div> 
 
</div>

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

Я открыт для любых предложений! :)

источник

2016-10-26 Ross

Но ... вы в беде или просто хотите, чтобы мы разрешим его для вас? –

Да, пытаясь найти решение для прикрепленного изображения. – Ross

Я думаю, вы хотите, чтобы мы «Медведь» с вами. [Baring with you is different different] (http://english.stackexchange.com/q/1269) ... –

Вы могли бы попробовать работать с микс-совмещенного режима,

микс-Blend-режим: смешиваем-смесь -mode CSS описывает, как содержимое элемента должно сочетаться с содержимым прямого родительского элемента элемента и фона элемента.

.grid-item { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 200px; 
 
    padding: 5px; 
 
} 
 

 
.grid-container { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #eee; 
 
} 
 

 
.grid-container img { 
 
    position: absolute; 
 
} 
 

 
.grid-item-overlay { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 5px; 
 
    bottom: 5px; 
 
    right: 5px; 
 
    background-color: rgba(0,0,0,0.5); 
 
} 
 

 
span { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 100%; 
 
    transform: translate(-50%, -50%); 
 
    font-weight: 700; 
 
    font-family: sans-serif; 
 
    font-size: 40px; 
 
    text-align: center; 
 
    color:rgba(255,255,255,1); 
 
    mix-blend-mode: overlay; 
 
}

<div class="grid-item"> 
 
    <div class="grid-container"> 
 
    <img src="https://unsplash.it/300/200/?random"> 
 
    <div class="grid-item-overlay"> 
 
     <span>Text Here</span> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-10-26 15:22:11 frnt

Просто имейте в виду, что такая технология по-прежнему очень экспериментальна на данный момент. Тем не менее, это именно то, что ищет OP, и нет другого способа сделать это. –

@AntoineCombes хорошо может быть, но я не знаю. В настоящее время это работает отлично. – frnt

Нет. Это точно для такого варианта использования (в том числе, конечно), что режимы смешивания вводятся в CSS –

<div class="grid-item"> 
    <div class="grid-container"> 
    <img src="https://unsplash.it/300/200/?random"> 
    <div class="grid-item-overlay"> 
     <span class="text">Text Here</span> 
    </div> 
    </div> 
</div>

Добавить CSS в свой файл CSS

.text{ 
     color: rgba(255, 255, 255, 0.1); 
     } 

.grid-item-overlay:before{ 
    position: absolute; 
    content:" "; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    display: block; 
    z-index:0; 
    background-color:rgba(255,0,0,0.5); 
}

источник

2016-10-26 15:07:32

Но это не удалит фон div (.grid-item-overlay) – Ross

теперь использовать это Код –

Текст, который нужно обрезать маску фона Div

ответ

Смежные вопросы