Question

我刚刚开始学习Html和CSS，我想到了一个网站，您可以在其中输入YouTube链接，并以5 * 5马赛克显示视频，视频也在背景上。它没有任何用处，但我真的想成功！让我解释This is what I have right now这就是我做的事情

＆＃13;

img#bgimg { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover; 
}
	
	
.stick {
	
	
	height:158px;
	width:280px;
	line-height: 0;


 
}
.center{
	
	height:158px;
	width:280px;
	display: inline-flex;
}

＆＃13;

<html>
<head>
<title>schema</title>
<link rel="stylesheet" type="text/css" href="schema.css">
</head>
<body>
<img id="bgimg" >
<source src="">
</img>
<div>
	<img class="stick" src="black.jpg"></img>
	<img class="stick" src="black.jpg"></img>
	<img class="stick" src="black.jpg"></img>
	<img class="stick" src="black.jpg"></img>
	<img class="stick" src="black.jpg"></img>
	<img class="stick" src="black.jpg"></img>
	<img class="center" src="7.jpg"></img>
	<img class="center" src="8.jpg"></img>
	<img class="center" src="9.jpg"></img>
	<img class="stick" src="black.jpg"></img>
	<img class="stick" src="black.jpg"></img>
	<img class="center" src="12.jpg"></img>
	<img class="center" src="13.jpg"></img>
	<img class="center" src="14.jpg"></img>
	<img class="stick" src="black.jpg"></img>
	<img class="stick" src="black.jpg"></img>
	<img class="center" src="17.jpg"></img>
	<img class="center" src="18.jpg"></img>
	<img class="center" src="19.jpg"></img>
	<img class="stick" src="black.jpg"></img>
	<img class="stick" src="black.jpg"></img>
	<img class="stick" src="black.jpg"></img>
	<img class="stick" src="black.jpg"></img>
	<img class="stick" src="black.jpg"></img>
	<img class="stick" src="black.jpg"></img>
	</div>
</body>
</html>

＆＃13;

我尝试使用p align =＆＃34; center＆＃34;但是如果可能的话我也想使用CSS 7/8/9/12/13/14/17/18/19正方形是一个大广场，但我没有设法做到这一点。所有其他方块也应该是视频我怎样才能做到这一点？感谢

Answer 1

您想要这段代码

吗？

<html>
<head>
<style>

.center{
    margin:50px 50px 0px 50px;
    height:158px;
    width:280px;
    display: inline-flex;
}
 </style>
<title>schema</title>
<link rel="stylesheet" type="text/css" href="schema.css">
</head>
<body>
<div class="center">
    <video width="400" controls>
 <source src="mov_bbb.mp4" type="video/mp4">


    </video>
    </div>
</body>
</html>

Youtube视频5 * 5马赛克与CSS？

1 个答案: