css3 相关问题

我需要在包含HTML 5视频的div的div ON TOP上叠加一个div。在下面的示例中，重叠div的ID为“ video_overlays”。请参见下面的示例： ] ] >> [[ 您走了，希望对您有所帮助 http://jsfiddle.net/kNMnr/ 这里也是CSS #video_box{ float:left; } #video_overlays { position:absolute; float:left; width:640px; min-height:370px; background-color:#000; z-index:300000; } 这是一个精简的示例，使用尽可能少的HTML标记。基础知识叠加层由:before容器上的.content伪元素提供。不需要z索引，:before自然在视频元素上分层。 .content容器为position: relative，因此position: absolute叠加层相对于其放置。将.content和left / right / bottom设置为left时，覆盖层被拉伸以覆盖整个0 div宽度。视频的宽度由width: 100%]的容器宽度控制> 演示 .content { position: relative; width: 500px; margin: 0 auto; padding: 20px; } .content video { width: 100%; display: block; } .content:before { content: ''; position: absolute; background: rgba(0, 0, 0, 0.5); border-radius: 5px; top: 0; right: 0; bottom: 0; left: 0; } <div class="content"> <video id="player" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/1/18/Big_Buck_Bunny_Trailer_1080p.ogv/Big_Buck_Bunny_Trailer_1080p.ogv.360p.vp9.webm" autoplay loop muted></video> </div> 这里是将内容放在父div内的示例。这也可以确保覆盖图从视频边缘开始，即使居中也是如此。 <div class="outer-container"> <div class="inner-container"> <div class="video-overlay">Bug Buck Bunny - Trailer</div> <video id="player" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" controls autoplay loop></video> </div> </div> css为 .outer-container { border: 1px dotted black; width: 100%; height: 100%; text-align: center; } .inner-container { border: 1px solid black; display: inline-block; position: relative; } .video-overlay { position: absolute; left: 0px; top: 0px; margin: 10px; padding: 5px 5px; font-size: 20px; font-family: Helvetica; color: #FFF; background-color: rgba(50, 50, 50, 0.3); } video { width: 100%; height: 100%; } 这是jsfiddle https://jsfiddle.net/dyrepk2x/2/ 希望有帮助：） <div id="video_box"> <div id="video_overlays"></div> <div> <video id="player" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" onclick="this.play();">Your browser does not support this streaming content.</video> </div> </div> 为此，您只需要像这样添加css： #video_overlays { position: absolute; background-color: rgba(0, 0, 0, 0.46); z-index: 2; left: 0; right: 0; top: 0; bottom: 0; } #video_box{position: relative;}

html css html5 css3 html5-video

回答 4 投票 33

相对URL在.less中不起作用

我正在使用.less。我定义了一个基本.less，它将在不同的位置使用。 http：// / /components/base.less在这个基本文件中，我想定义一个字体系列。我是...

css3 fonts less

回答 2 投票 1

Chrome和Safari浏览器中的线性渐变

我无法在Safari和Chrome中显示线性渐变。在Firefox中显示正常。我正在尝试：背景：-webkit-linear-gradient（center top，＃9E9E9E，＃454545）重复滚动0 0 ...

css css3 cross-browser linear-gradients

回答 5 投票 14

无法使地图与gmaps.js一起显示

很抱歉打扰您这么简单，但是我真的看不到有什么问题。我在一个网站上工作，我了解HTML5＆CSS3，但是对jQuery / javascript却了解不多。我想放一个...