YouTube動画5 * 5モザイク（CSS付き）？

私はちょうどHtmlとCSSを学び始めました。私はあなたのYouTubeリンクを入力することができたウェブサイトのアイデアを持っていました。また、動画も背景に5 * 5モザイクで表示されます。それは何も使用していないが、私は本当にそれを作りたい！私はこれは私がYouTube動画5 * 5モザイク（CSS付き）？

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; 
 
} 
 
\t 
 
\t 
 
.stick { 
 
\t 
 
\t 
 
\t height:158px; 
 
\t width:280px; 
 
\t line-height: 0; 
 

 

 
    
 
} 
 
.center{ 
 
\t 
 
\t height:158px; 
 
\t width:280px; 
 
\t 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> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="center" src="7.jpg"></img> 
 
\t <img class="center" src="8.jpg"></img> 
 
\t <img class="center" src="9.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="center" src="12.jpg"></img> 
 
\t <img class="center" src="13.jpg"></img> 
 
\t <img class="center" src="14.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="center" src="17.jpg"></img> 
 
\t <img class="center" src="18.jpg"></img> 
 
\t <img class="center" src="19.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t </div> 
 
</body> 
 
</html>

やったことあるThis is what I have right nowを説明しましょう7/8/9また、私は、p ALIGN =「センター」を使用して、すべてを中央しようとしたが、私は、可能な場合はCSSを使用したいです/ 12/13/14/17/18/19の正方形は1つの大きな広場になるために上回っていますが、私はそれをすることはできませんでした。他のすべての四角形もビデオであるはずですどうすればいいですか？おかげ

出典

2016-10-22 ItsMe Atd

は、あなたすでに良いでしょう。このコード

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

出典

2016-10-22 10:33:14

たいと思います！これでモザイクを作るにはどうすればいいですか？真ん中のものはどうですか？ –

YouTube動画5 * 5モザイク（CSS付き）？

答えて

関連する問題