jquery - 将网格叠加应用于图像和视频

Question

我有以下问题:

• 我想为我的视频和图片添加叠加层。
• 叠加层基于 PNG 像素。

• 我想通过重复 PNG-Pixel 覆盖图像和视频的整个宽度和高度

  [1]: /image/ljBrB.png <- 这是像素

这是一个结果示例:https://theuprisingcreative.com/video/

        * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
        
        .row {
            clear: both;
        }
        
        .spalten-6 {
            width: 49.99992%;
        }

        .spalten-12 {
            width: 100%;
        }
        
        .spalten-6,  .spalten-12 
        { float:left;} 
   
        .img-box img {
            width: 100%;
        }
        
        .img-box {
            border-left: 2px solid white;
            border-top: 2px solid white;
        }
        

#video-container {
    position: relative;
    height:300px
}
#video-container {
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    overflow: hidden;

}
video#bgVid {
    position:absolute;
    z-index:-1;
    background: url('http://ewallpaperhub.com/wp-content/uploads/2015/01/nature-wallpaper-3.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
}
video#bgVid.fillWidth {
    width: 100%;
   position:relative
}

<div id="video-container">
<video id="bgVid" loop class="fillWidth" autoplay>
<source src=http://bigcom.com/assets/2014/08/iChooseB.mp4 type=video/mp4>
</video> 
</div>
  
<div id="underneath">   
<p style="color:#000">content underneath</p>
    </div>

   <div class="row">
   <div class="spalten-6">
      <div class="img-box">
     <img src="Images/fargo-jamie-lee-video-clip.png" alt="">
       </div>
   </div>
   <div class="spalten-6">
       <div class="img-box">
       <div class="overlay">
     <img src="Images/la-bomba-video-clip.jpg" alt="">
       </div>
       </div>
   </div>
    </div>

非常感谢您的帮助!

Answer 1

我能够使用 CSS gradient 获得预期的结果pseudo-element 上的背景对于元素 #video-container。

例如，如果我添加:

background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), transparent;

及其前缀版本为 #video-container:after，我得到以下工作示例:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.row {
  clear: both;
}

.spalten-6 {
  width: 49.99992%;
}

.spalten-12 {
  width: 100%;
}

.spalten-6,
.spalten-12 {
  float: left;
}

.img-box img {
  width: 100%;
}

.img-box {
  border-left: 2px solid white;
  border-top: 2px solid white;
  position:relative
}

#video-container {
  position: relative;
  height: 300px
}

#video-container {
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative; font-size:0;
}

#video-container:after, .img-box:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), transparent;
  background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), transparent;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), transparent;
  -webkit-background-size: 1px 1px;
  background-size: 1px 4px;
}

video#bgVid {
  position: absolute;
  z-index: -1;
  background: url('http://ewallpaperhub.com/wp-content/uploads/2015/01/nature-wallpaper-3.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}

video#bgVid.fillWidth {
  width: 100%;
  position: relative
}

<div id="video-container">
  <video id="bgVid" loop class="fillWidth" autoplay>
<source src=http://bigcom.com/assets/2014/08/iChooseB.mp4 type=video/mp4>
</video>
</div>

<div id="underneath">
  <p style="color:#000">content underneath</p>
</div>

<div class="row">
  <div class="spalten-6">
    <div class="img-box">
      <img src="http://img.clubic.com/00466352-photo-cadre-philips-affichage-16-9.jpg" alt="">
    </div>
  </div>
  <div class="spalten-6">
    <div class="img-box">
      <div class="overlay">
        <img src="http://www.photographycorner.com/galleries/data/2882/aspect4.jpg" alt="">
      </div>
    </div>
  </div>
</div>

您可以使用伪元素 #video-container:after 上的属性 background-size 来控制“像素”大小和颜色。您还可以控制整个网格的不透明度，并在不影响视频的情况下根据自己的喜好进行调整。