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

Stack Overflow用户

提问于 2016-10-22 18:21:55

回答 1查看 138关注 0票数 3

我刚刚开始学习Html和CSS，我有了一个网站的想法，在那里你可以输入一个youtube链接，它以5*5的马赛克显示视频，视频也在背景上。它没有任何用处，但我真的很想做到！让我解释一下，This is what I have right now，这就是我所做的

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;
}

<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>

我试着用p align=“align=”把所有东西都居中，但如果可能的话，我想用CSS把7/8/9/12/13/14/17/18/19的正方形变成一个大正方形，但我没能做到。所有其他的方块都应该是视频，我怎么做呢？谢谢

html

css

回答 1

Stack Overflow用户

发布于 2016-10-22 18:33:14

您想要此代码吗

<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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40190992

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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