Question

我会在视频背景上使用插入效果文字阴影，但不会对其产生影响。这是我的代码：

body {
    margin: 0;
    padding: 0;
    font-size: 62.5%;
}

#image-slider {
    position: relative;
}

#image-slider > div {
    overflow: hidden;
}

#container {
    position: relative;
    overflow: hidden;
}

#container .content {
    position: absolute;
    top: 50%;
        margin-top: -200px;
        font-family: 'Dancing Script', cursive;
    left: 0;
    color: #FFF;
    text-align: center;
    width: 100%;
    font-size: 6em;
    padding: 120px 0;
    font-weight: bold;
    text-shadow: 3px 3px rgba(0, 0, 0, 0.5);
}

.inset-text-effect {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border: none;
  font: normal 70px/1 "Aladin", Helvetica, sans-serif;
  color: rgba(48,48,48,1);
  text-align: center;
  text-transform: normal;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;
  text-shadow: 1px 1px 0 rgba(140,140,140,0.6) , -1px -1px 1px rgba(0,0,0,0.67) ;
}

<div id="container">
    <video autoplay loop muted>
        <source src="http://inserthtml.com/demos/javascript/background-videos/flowers.mp4" type="video/mp4">
        <source src="http://inserthtml.com/demos/javascript/background-videos/flowers.webm" type="video/webm">
    </video>
    <div class="content">
        Text over Video
    </div>
<div class="inset-text-effect">Inset Text over Video</div>
</div>

正如你可以看到插页不是视频背景，怎么做？并且请添加CSS，文本将完全位于页面中间，我使用 top：50％，但它仍然不在中间。

问题：

1：如何在视频背景上使用插入文字效果？

2：如何准确地在页面的中间/中心制作文本？

提前致谢

如何在视频背景上制作插入效果文字阴影？

0 个答案: