視頻背景網格覆蓋問題

這可能是我失蹤一個非常明顯的錯誤，但無論如何：視頻背景網格覆蓋問題

我在與使用視頻作爲一個網站的背景，並用半覆蓋它的問題 - 透明的4x4px PNG圖像作爲網格。網格與視頻重疊，因此視頻應該通過重複的透明圖像顯示，但它似乎消失。

電網覆蓋問題 Grid appearing, no video though 網格：

任何幫助，這是極大的（儘管它可能只是代表我的一個非常簡單的錯誤）

這裏的問題的一些截圖讚賞出現，但沒有視頻通過它（視頻看起來像下面的截圖） Video that should be showing through the grid

網格是一個重複的4x4px PNG，白色2x2px是透明和灰色2x2px在75％不透明度。

在這裏被grid.png吹起（太小，附加）：

blown up grid.png

編輯：grid.png附

HTML

<div id="container"> 

     <div class="grid"></div> 

     <!-- BG-VIDEO --> 

     <video autoplay loop muted> 
      <source src="video/video.mov" type="video/mp4"> 
     </video> 
     <div class="content"> 
      <center> 
       <div class="titlebox"> 
        <h1>The Redtree Cafe</h1> 
       </div> 
      </center> 
     </div> 



    </div>

CSS

*{ 
    margin: 0; 
    padding: 0; 
} 

/* VIDEO */ 

#container { 
    position: fixed; 
    overflow: hidden; 
    width: 100%; 
    height: 100vh; 
} 


.grid { 
    background: url(img/grid.png); 
    width: 100%; 
    height: 100vh; 
    z-index: 1000; 
} 

/*Front Page*/ 

.titlebox { 
    z-index: 2000; 
}

來源

2014-09-06 TomHill

如果grid.png是hqR7r.png（轉貼），並假設是半透明;它不透明，不透明;它是不透明的白色和不透明的灰色。 – Wayne 2014-09-06 08:01:49

不 - hqR7r.png是grid.png的截圖，我無法附上實際的文件 – TomHill 2014-09-06 08:06:23

@Wayne - 我已經添加grid.png的帖子（雖然它很小 - 你將不得不斜視）:) – TomHill 2014-09-06 08:11:33

問題是您的視頻在網格下方呈現。其中一個解決這個問題的方法是添加position: absolute到網格元素：

.grid { 
    position: absolute; 
}

見這裏：http://jsfiddle.net/6wotw7u3/

來源

2014-09-06 08:21:29 Shomz

謝謝！就是這樣！ – TomHill 2014-09-06 08:24:12

如果你不介意我問，你能解釋爲什麼這個職位必須是絕對的嗎？ – TomHill 2014-09-06 08:31:11

因爲在這種情況下，您可以將元素疊加在另一個上面，它們不會向下「推」下一個元素，但會停留在頂部（或下面）。這只是可能的解決方案之一，您可以嘗試相對定位與負邊距，固定位置等，但我認爲這也是最簡單的。看到這個：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ – Shomz 2014-09-06 08:44:58

你能做到這一點首先設置

.grid{ opacity.1;}

它會讓你的網格透明

如果問題仍然沒有解決他們的是思考的問題是，你的天堂」 t給css視頻

video { width:100%; height:400px;}

來源

2014-09-06 07:52:46 himanshu

嗯，沒有 - 仍然不工作 - 謝謝你的幫助，雖然 – TomHill 2014-09-06 08:09:06

首先刪除你的網格，看看視頻是否存在，讓我知道 – himanshu 2014-09-06 08:12:22

是的，視頻是存在的（與原始代碼以及你的代碼），如果我註釋掉'

' – TomHill 2014-09-06 08:15:27

視頻背景網格覆蓋問題

回答

相關問題