фон по диагонали
Вложений: 1
Как зделать повторяющийся от центра фон по диагонали с помощью однопиксельной картинки. При этом фон должен быть резиновым по высоте.
Вот пример фона :help: |
Цитата:
|
попиксельно рисуем фон на canvas с помощью одного однопиксельного img, который для каждой точки меняем с помощью data: url
var a = ['О', 'П', 'Ж', 'А'];
alert(a[0].replace('О', 'в')+a[1].replace('П', 'е')+a[2].replace('Ж', 'ч')+a[3].replace('А', 'н')+a[0].replace('О', 'о')+a[1].replace('П', 'с')+a[2].replace('Ж', 'т')+a[3].replace('А', 'ь'))
ну как? :) |
Из картики 1x1 пиксель не сделать такой фон.
Подобный фон можно сделать векторной графикой - VML/SVG |
Logo, не только, можно даже с градиентом :D
<script type="text/javascript">
window.onload = function(){
var i = 0;
(function(){
for(j=0; j<15; j++){
if(++i <= document.documentElement.clientHeight){
var element = document.createElement('div');
element.style.cssText = 'background: #'+0+j+j+j+j+j+'; top:'+i+'px; left:'+i+'px';
document.body.appendChild(element);
setTimeout(arguments.callee, 10);
}
}
})();
};
</script>
<style type="text/css">
body {background: red;}
div {
position: absolute;
color: white;
text-align: center;
width: 50px;
height: 50px;
}
</style>
<div></div>
|
или даже что-то высоко художественное, без всяких canvas :D
<script type="text/javascript">
window.onload = function(){
var div = document.getElementsByTagName('div')[0], square = document.body.offsetWidth, i = 0;
(function(){
if(i++<square){
for(j=0; j<15; j++){
var element = document.createElement('div');
element.style.top = 50+50*Math.sin(20*(i+Math.PI/2)*20)+'px';
element.style.left = i+'px';
element.style.background = '#'+i+i+0+j+i+i;
document.body.appendChild(element);
}
}
window.setTimeout(arguments.callee, 1);
})();
};
</script>
<style type="text/css">
body {background: #DDD;}
div {
position: absolute;
width: 8px;
height: 8px;
}
</style>
|
Я дико извиняюсь за дачу ложной информации;) Я имел ввиду, что 1px - высота картинки, а ширина 1000px
|
Нужно чтобы эта фоновая картина при каждой прорисовке вниз, меняла позицию на 1px влево
|
В таком случае надо вручную(не совсем конечно) сделать изображение в полный цикл и поэксперементировать с pngout. Есть вероятность что результирующий вес будет немногим больше оригинала.
|
а чего, я вот квадратный градиент в вакууме нарисовал (осторожно, браузер может уйти в себя и не вернуться)
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<style type="text/css">
div {
width: 1px;
height: 1px;
overflow: hidden;
float: left;
}
</style>
<script>
for( var j=0; j<128; j++ )
for( var k=j; k<j+128; k++ ){
var div = document.createElement('div');
div.style.background = 'rgb('+[0,0,k].join(',')+')';
if( k == j )
div.style.clear = 'left';
document.body.appendChild( div );
}
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 04:20. |