背景画像をロードするラッパーを作成しました。その上に、for ループの助けを借りて多数のブロックが表示されます。ブロックの幅は、ウィンドウの幅を 10 で割った値に依存します。次に、ブロックをウィンドウの高さに応じて制限し、ウィンドウのサイズを変更する必要があります。
作業例jsfiddle
[1]: [http://jsfiddle.net/RaVDJ/1/][1]
背景画像をロードするラッパーを作成しました。その上に、for ループの助けを借りて多数のブロックが表示されます。ブロックの幅は、ウィンドウの幅を 10 で割った値に依存します。次に、ブロックをウィンドウの高さに応じて制限し、ウィンドウのサイズを変更する必要があります。
作業例jsfiddle
[1]: [http://jsfiddle.net/RaVDJ/1/][1]
このようなものが欲しいですかhttp://jsfiddle.net/slash197/RaVDJ/5/
CSS
html {
height: 100%; margin: 0px; padding: 0px;
}
body {
background: url(http://wallpaperfast.com/wp-content/uploads/2013/05/Beautiful-Beach-Wallpaper.jpg) no-repeat;
background-size: auto 100%;
height: 100%; margin: 0px; padding: 0px;
}
.wrap {
margin: 0px;
width: 100%;
height: 100%;
}
.wrap div {
float: left;
background-color: #cc0000;
opacity: 0.5;
cursor: pointer;
margin: 1px;
transition: opacity 0.3s linear;
}
.wrap div:hover {
opacity: 0;
}
HTML
<div class="wrap"></div>
JS
$(document).ready(function() {
addBoxes();
});
$(window).resize(addBoxes);
function addBoxes()
{
$('.wrap').html("");
var size = Math.floor($('.wrap').width()/10);
var sizeInner = size - 2;
var tw = Math.floor($('.wrap').width()/size);
var th = Math.floor($('.wrap').height()/size);
for (var i = 0; i < th; i++)
{
for (var j = 0; j < tw; j++)
{
$('.wrap').append('<div style="width: ' + sizeInner + 'px; height: ' + sizeInner + 'px;"></div>');
}
}
}