你可以在視頻元素上顯示css box shadow（插圖）

我爲<div>添加了一個方塊陰影，並在div上添加了一個<video>元素。框陰影顯示在div上，但它不影響視頻元素。你可以在視頻元素上顯示css box shadow（插圖）

這是預期的行爲，有沒有辦法讓箱子影子也影響視頻？

代碼片段：

.video-player { 
 
    -webkit-box-shadow: inset 0px 0px 103px 0px rgba(0,0,0,0.75); 
 
    -moz-box-shadow: inset 0px 0px 103px 0px rgba(0,0,0,0.75); 
 
    box-shadow: inset 0px 0px 103px 0px rgba(0,0,0,0.75); 
 
}

<div class="video-player"> 
 
    <video width="100%"> 
 
     <source src="http://bit.ly/1wIsuB2" type="video/mp4" /> 
 
    </video> 
 
    <h1>Test</h1> 
 
</div>

這顯然不是一個大問題，但我覺得這相當有趣。

編輯：JSFiddle

編輯2：這是插圖陰影

EDIT 3：，能夠顯示視頻元件上的插圖陰影。它需要額外的提示。如果你想達到這個目的，請看答案@cport1給出的

來源

2014-11-06 Jones

你能不能給一個鏈接的jsfiddle？ – Karmacoma 2014-11-06 18:41:06

如果視頻是Flash，則可能需要更改視頻本身的透明度。請參閱：http://www.aleosoft.com/flashtutorial_transparent.html – 2014-11-06 19:00:29

該視頻是一個MP4。我添加了一個JSFiddle（http://jsfiddle.net/dbt6g5ra/） – Jones 2014-11-06 19:03:48

box-shadow是父元素的一部分，因此它在視頻下呈現。一種選擇是有哪些地方陰影的視頻，像這樣一個div：

http://jsfiddle.net/dbt6g5ra/1/

<div class="video-player"> 
    <video class="vid" width="100%"> 
     <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> 
    </video> 
    <h1>Test</h1> 
    <div class="shadow"></div> 
</div> 


.video-player { 
//styles 

} 
.shadow { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    box-shadow: inset 0px 0px 36px 36px rgba(0,0,0,0.75); 
    top: 0; 
    left: 0; 
}

來源

2014-11-06 19:13:28 cport1

啊，這很有趣。所以視頻呈現在'div'的上方，但div內的其他元素受到盒子陰影的影響。 – Jones 2014-11-06 19:19:03

是否還有其他像'

an 標籤的行爲與

-1

video元素延伸到視頻高度並停止。它應用了陰影，但你看不到它。如果將陰影和底部填充（例如30px）添加到video元素，則會出現陰影。

編輯： 我想指出，我完全錯過了OP想要一個插圖陰影下，OP以來編輯標題，使之更清楚。

來源

2014-11-06 19:07:58

我試圖給視頻添加填充和陰影，但視頻仍然不受陰影的影響。 http://jsfiddle.net/gzcj7f7q/1/ – Jones 2014-11-06 19:15:23

我可以看到你的jsfiddle在Firefox中的影子？你使用的是什麼瀏覽器？ – 2014-11-06 19:49:52

下面是我書中一個示例的box-shadow示例，它很好用：http://html5multimedia.com/code/ch6/css-round-corners-and-shadow.html – 2014-11-06 20:20:05

-2

只要做到這一點

.video-player { 
    box-shadow: -1px 1px 5px #888; 
}

來源

2014-11-06 19:20:50 vcrzy

這似乎並沒有做太多 – Jones 2014-11-06 19:22:20

我在我的電腦中做過，並且運行良好。但我改變了寬度爲90％.Hugs – vcrzy 2014-11-06 19:23:26

@Jones正在請求插入框陰影。 – cport1 2014-11-06 20:29:20

你可以在視頻元素上顯示css box shadow（插圖）

回答

相關問題