Html CSS div，带背景视频和；背景尺寸：封面“-相似属性_Html_Css

Html CSS div，带背景视频和；背景尺寸：封面“-相似属性

html css

Html CSS div，带背景视频和；背景尺寸：封面“-相似属性,html,css,Html,Css,我想用一个视频来代替蓝色的图像。这可能吗 .logo{ 背景图像：url（“https://dummyimage.com/2996x1400/003399/ccc.jpg"); 背景位置：中心；背景尺寸：封面；高度：100vh；溢出：隐藏；颜色：#ffffff；垫顶：10vh；垫底：10vh；左侧填充：20px；右边填充：20px； } 文本文本文本文本给你 .logo{ 高度：100vh；溢出：隐藏；颜色：#ffffff；垫顶：10vh；垫底：10vh；左侧填

我想用一个视频来代替蓝色的图像。这可能吗

.logo{
背景图像：url（“https://dummyimage.com/2996x1400/003399/ccc.jpg");
背景位置：中心；
背景尺寸：封面；
高度：100vh；
溢出：隐藏；
颜色：#ffffff；
垫顶：10vh；
垫底：10vh；
左侧填充：20px；
右边填充：20px；
}


文本文本文本文本

给你

.logo{
高度：100vh；
溢出：隐藏；
颜色：#ffffff；
垫顶：10vh；
垫底：10vh；
左侧填充：20px；
右边填充：20px；
位置：相对；/*需要正确定位视频*/
}
录像带{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：-1；
对象适合度：cover；/*与“绝对”结合使用，与背景大小类似，但适用于DOM元素*/
}


文本文本文本文本

我成功地使用了以下HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <link rel="stylesheet" href="css/styles.css" type="text/css" />
    </head>
    <body>
        <div id="container">
            <div id="main">
                    <video playsinline autoplay muted loop>
                        <source src="videos/video1.mp4" type="video/mp4">
                        <source src="videos/output.ogg" type="video/ogg">
                        <source src="videos/video2.webm" type="video/webm">
                            Your browser does not support the video tag.
                    </video>
                </div>
                <div class="overlay">
                    <p><br><br><br><br><br> <br><br> </p>
                    <img style="float:left" src="images/result06.png" alt="Tensioning Grid Loop 4" width="100" height="100"> 
                </div>
            </div>
        </div>
    </body>
</html>


您的浏览器不支持视频标记。

我在
找到了帮助

我必须插入换行符才能将小图像向下移动。

到目前为止您尝试了什么？这是否回答了您的问题？这对我有用！谢谢（我只需将css进一步修改为“高度：100vh；宽度：100vw；”，并成功地将其放入我的网站！）

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <link rel="stylesheet" href="css/styles.css" type="text/css" />
    </head>
    <body>
        <div id="container">
            <div id="main">
                    <video playsinline autoplay muted loop>
                        <source src="videos/video1.mp4" type="video/mp4">
                        <source src="videos/output.ogg" type="video/ogg">
                        <source src="videos/video2.webm" type="video/webm">
                            Your browser does not support the video tag.
                    </video>
                </div>
                <div class="overlay">
                    <p><br><br><br><br><br> <br><br> </p>
                    <img style="float:left" src="images/result06.png" alt="Tensioning Grid Loop 4" width="100" height="100"> 
                </div>
            </div>
        </div>
    </body>
</html>