Наложение заголовка на видео с помощью CSS

Question

Каков наилучший способ сделать тонкую сетку наложения, как показано на картинке?

(Это отстой видео фона Но за заголовком..)

Answer 1

Как упомянут Кристине, вы можете иметь 3 слоя:

1. Видео
2. Fine сетка (например, из-за прозрачности)
3. Заголовок (Gramercypark)

Вы можете достичь этого, используя z-index в своем css. More info & example here.

Для изображения я бы рекомендовал использовать фигуру + и нанести ее на повтор, чтобы покрыть всю страницу. Использование небольшого изображения на повторе минимизирует (вниз) время загрузки и пропускную способность вашего сайта.

Answer 2

Вы также можете использовать этот трюк:

.pattern { position:relative; background:url(https://i.kinja-img.com/gawker-media/image/upload/m0ynovs4hafceboer3zr.gif); width:636px; height:358px; text-align:center; color:#fff;} 
 
.pattern:after { content:""; width:100%; height:100%; position:absolute; top:0; left:0; z-index:0;} 
 
.pattern > div { position:relative; z-index:1;} 
 
.pattern:after{ background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhJREFUeNpiYGBgePz//38GRhABAgABBgBFTAbfCBNE2AAAAABJRU5ErkJggg==); /*background:url(images/pattern.png);*/}

<div class="pattern"> 
 
    <div> 
 
    <h1>Windows 10</h1> 
 
    </div> 
 
</div>