Question

编码新手。我已将视频设置为在网站背景上自动播放。当我尝试将图像放在顶部时，我会遇到问题，特别是在尝试水平居中时。

典型的解决方案会导致图像消失：

img.center {
   display: block;
   margin: 0 auto;
}

这是我的徽标CSS：

.logo {
   position: absolute;
   margin-left: auto;
   margin-right: auto;
   height: 250px;
   padding-top: 15px;
}

我需要将此徽标悬浮在背景视频的顶部，并将其设置为：

#bgvideo {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   min-width: 100%;
   min-height: 100%;
}

Answer 1

这很简单。这是一个有效的codepen。

HTML：

<video autoplay muted loop id="myVideo">
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<img id="myImg" src="https://www.searchenginegenie.com/images/29-samplelogo.jpg" width="200">

CSS：

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}
#myImg {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    margin: auto; 
}

使用CSS水平居中图像，在背景视频之上

1 个答案: