Question

我有以下问题：

我想为我的视频和图片添加叠加效果。
叠加层基于PNG-Pixel。
我想通过重复PNG-Pixel来覆盖图像和cideos的整个宽度和高度

[1]：https://i.stack.imgur.com/ljBrB.png＆lt; - 这是像素

以下是结果示例：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>

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

Answer 2

#video-container::after {
    content: "";
    height: 165%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;
    background: url(https://i.stack.imgur.com/ljBrB.png) 0px 0px repeat rgba(0, 0, 0, 0.35);
}

将网格覆盖应用于图像和视频

2 个答案: