居中放置图像并将视频放置在图像中

Reecechapas

我正在尝试将电视的图像居中放置，但它一直在切断右侧，并将其放置在页面的左侧。

我还试图将黑色视频屏幕放在电视中，就像在电视上观看它一样。

有任何想法吗？

<div id="tv_container">
    <video>
       <source src="video/video.mp4" type="video/mp4" />
    </video>
 </div>

#tv_container {
    background: url('70 TV.png');
    background-attachment: fixed;
    background-position: center;
    width: 1080px; /* Adjust TV image width */
    height: 608px; /* Adjust TV image height */

雅各布

尝试这样做：

#tv_container {
    background-image: url('70 TV.png');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat; // this will fix cutting issue if I understood you well
    width: 1080px;
    height: 608px;
}
// center video horizontally and vertically
video {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

并避免在文件名中使用空格，70_TV.png例如，为图像命名。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。