使用CSS叠加在视频上的标题

Question

如图所示，制作精美网格叠加层的最佳方法是什么？

（它正在铺设视频背景。但在标题后面。）

Answer 1

正如Kristine所说，你可以有3层：

1. 视频
2. 精细网格（例如png，由于它的透明度）
3. Heading（Gramercypark）

您可以在css中使用z-index来实现此目的。 More info & example here

对于图像，我建议使用+图形，并将其重复覆盖整个页面。重复使用一个小图像可以最大限度地减少网站的（下载）加载时间和带宽。

Answer 2

你也可以使用这个技巧：

＆＃13;

＆＃13;

.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);*/}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;