простейший вопрос по джаваскипт

Веб-мастеринг

01.04.13

✎

23:33

собственно сабжик

я задаю фон страницы с помощью такого выражения:

document.body.background ="fon.jpg";

подскажите как наложить opacity на этот фон с помощью javascript

спасибо!

1 Sergeyspb13

01.04.13

✎

23:38

делай так
http://www.kakprosto.ru/kak-98994-kak-sdelat-prozrachnyy-fon-html

2 Asmody

02.04.13

✎

00:55

(0) opacity на картинку не наложишь (можно, правда, поэкспериментировать с несколькими бекграундами, но это уже css3, а он не везде есть). самый проверенный вариант - кладется картинка на фон, сверху кладется див на всю страницу белого, серого или черного цвета, которому выставляется opacity, а сверху него - контейнер с opacity:1, и в нем уже все остальное

3 Asmody

02.04.13

✎

00:57

можно вообще на фон png с альфа-каналом положить, если на IE6 наплевать

4 Torquader

02.04.13

✎

02:41

Фон - это то, что под элементами управления - и зачем ему opacity - можно же картинку подправить под нужные цвета.

5 Маленький Вопросик

02.04.13

✎

04:59

(2) не силен в в слоях, те возможно сделать 2 слоя один под другим? на нижнем будет располагаться фоновая картинка растянутая по ширине экрана, в верхнем - все остальное, меню и тп?

6 Tashiro

02.04.13

✎

06:04

зачем JS-ом ставить стили? фуфуфу.
<style>
body{background: url(path/to/img.jpg) top left;}
</style>
если нужна прозрачность то делайте отдельный контейнер для изображения и к нему opacity
(5) можно либо абсолютом, либо вложением одного слоя в другой
например
<body>
<div class="background"></div>

</body>

7 Маленький Вопросик

02.04.13

✎

06:09

(6) видишь, у меня конечная цель - плавная смена фона... (в "фоне" учавствуют несколько картинок >2)

вот сижу и думаю как правильнее это сделать...

8 Tashiro

02.04.13

✎

06:09

а вообще лучше png использовать сразу и пожать например этим
http://habrahabr.ru/post/135109/

9 Tashiro

02.04.13

✎

06:15

(7) рекомендую использовать Jquery для этих целей, если уж нужна прозрачность вне зависимости от самого изображения то тогда делайте HTML так:
<body>
<div id="bgrnd"><div>
<div id="content>
Some content
</div>
</body>

CSS:
html, body{position: relative; height: 100%; width: 100%}
#bgrnd{position: absolute; z-index: -1; background:url(bla/bla.jpg) top left; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.5;}

10 Маленький Вопросик

02.04.13

✎

06:21

(9) если честно, смотрел в сторону jquery, библиотека понятна пока мне на базовом уровне... убрать класс, добавить класс и т.п...

11 Tashiro

02.04.13

✎

06:23

+(9) наделал очепяток, вот полный рабочий вариант:

<html>
<head>
<style>
html, body{position: relative; height: 100%; width: 100%; margin: 0; padding: 0}
#bgrnd{position: absolute; z-index: -1; background: red top left; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.2;}
</style>
</head>
<body>
<div id="bgrnd"></div>
<div id="content">
Some content
</div>
</body>
</html>

(10) там все просто, большинство манипуляций и делается сменой\добавлением\удалением класса. остальное лучше в CSS делать

12 Tashiro

02.04.13

✎

06:26

+(11) И рекомендую загружать JQ и вообще любые библиотеки js в самом низу страницы а не в header, перед закрывающимся тегом </body> и все скрипты которые их используют загонять после этих библиотек.

13 Маленький Вопросик

02.04.13

✎

06:33

(12) в идеале бы примерчик смены хотябы 2-ух картинок (бекграундов) через jq, а там уж я соображу как добавить ....

14 Tashiro

02.04.13

✎

07:37

как-то так
<html>
<head>
<style>
html, body {
position: relative;
height: 100%;
width: 100%;
margin: 0;
padding: 0
}

#bgrnd {
position: absolute;
z-index: -1;
background: transparent top left;
width: 100%;
height: 100%;
top: 0;
left: 0;
//opacity: 0.5;
}
</style>
</head>
<body>
<div id="bgrnd" data-id="" ></div>
<input type="button" value="click me!" id="change_bgrnd"/>
<div id="content">
Some content
</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
if (typeof(jQuery) == 'undefined') jQuery = false;
(function ($) {
var $control = $("#change_bgrnd");
var images = new Array("img/fon_forum.gif","img/white_carbon.png");
var $bgrnd = $("#bgrnd");

var changeBgrnd = function(id){
$bgrnd.fadeOut(400,function(){
$bgrnd.attr("style","background-image: url("+images[id]+"); opacity: 0;");
$bgrnd.fadeTo(400,0.5);
});
};
$control.on("click",function(){
var imgID = $bgrnd.attr("data-id")
if (imgID == ""){
$bgrnd.attr("data-id",0);
changeBgrnd(0);
}else{
imgID ++;
if( imgID < images.length){
$bgrnd.attr("data-id",imgID);
changeBgrnd(imgID);
}else{
$bgrnd.attr("data-id",0);
changeBgrnd(0);
}

}
});

})(jQuery)
</script>
</body>
</html>

15 Tashiro

02.04.13

✎

07:39

https://dl.dropbox.com/u/13701731/html.7z

16 Asmody

02.04.13

✎

07:48

(14) чуть подрефакторить код: $().attr('style') => $().css(), $().attr('data-id') => $().data('id') и т. п., и добавить предзагрузку фонов

17 Маленький Вопросик

02.04.13

✎

07:50

(15) принцип понятен, большое спасибо.

начну изучать jquery с этого примера... а функция таймера имеется там? чтобы без постороннего вмешательства фоны менялись раз в 10 секуд, например

18 Asmody

02.04.13

✎

08:17

(17) таймер в js есть. setTimeout и setInterval

19 Tashiro

02.04.13

✎

09:40

небольшой рефакторинг + предзагрузка следующего фона
https://dl.dropbox.com/u/13701731/html2.7z

20 Tashiro

02.04.13