Исправлен заголовок, нуждающийся в прозрачности

У меня есть div для моего заголовка, который использует позицию: исправлено в css, чтобы оставаться на месте. Тем не менее, я хотел бы добавить прозрачность в div (фон div, который использует #color), когда прокручиваемый контент попадает под него.Исправлен заголовок, нуждающийся в прозрачности

Возможно ли это с помощью CSS? Моя ставка на каком-то JavaScript (возможно, jQuery)? Я не знаком с JS, любой пример будет замечательным.

Спасибо, Андрей.

PS: Я не использую никаких изображений для фона страницы или заголовка.

источник

2013-11-21 Popa Andrei

Вы можете достичь этого, установив opacity на div. Значения 0-1 чем ниже значение, тем более прозрачным является div.

JQuery

$('#divID').css('opacity','.4');

Это может быть сделано в простом CSS, а

#divId { 
    opacity:.4; 
}

Update

Если вы только хотите, чтобы ваш заголовок быть прозрачным при прокрутке вам будет нужно сделайте что-то подобное с помощью jQuery:

$(window).scroll(function() { 
    $('#divID').css('opacity','.4'); 
    clearTimeout($.data(this, 'scrollTimer')); 
    $.data(this, 'scrollTimer', setTimeout(function() { 
     $('#divID').css('opacity','1'); 
    }, 250)); 
});

Update 2

Если вы только хотите, чтобы ваш заголовок быть прозрачным, когда окно прокручивается вниз.

$(window).scroll(function() { 
    if($(this).scrollTop() == 0) 
     $('#divID').css('opacity','1'); 
    else 
     $('#divID').css('opacity','.4'); 
});

Пример

http://jsfiddle.net/VZU9K/

источник

2013-11-21 22:16:48 Trevor

Привет, Тревор, спасибо за ваш ответ. Было бы хорошо, если бы я обернул ваш код в тегах

Чтобы установить непрозрачность на фоне вы должны использовать RGBA вместо шестнадцатеричного кода цвета фона. Вы можете сделать это с помощью CSS:

#div { 
    background-color: rgba(0, 0, 0, .4); 
}

Первые три цифры являются красный, зеленый, синий, и может варьироваться от 0 до 255, окончательное число является непрозрачность, которая имеет диапазон .0 (0%) до 1 (100%).

Для быстрого преобразования из шестнадцатеричного кода RgB Я обычно использую сайт как: http://www.javascripter.net/faq/hextorgb.htm

Джошем

источник

2013-11-21 22:20:09

rgba не будет работать в IE8 и –

Зачем вам беспокоиться об IE8? IE8 не поддерживает современные веб-стандарты, и Google отказывается от поддержки во многих своих продуктах к концу 2013 года. Доля браузера уже ничтожна на 7% и падает. Я бы не стал тратить время на беспокойство об IE8, если вы не кодируете корпоративную интрасеть и не вынуждены. –

В этом случае лучше играть в нее, а потом извините. То, что у вас есть, если пользователь находится в IE8, превратит этот div черный, если rgba не поддерживается ... –

Вы можете установить следующие цвета фона в CSS этого дела. 0.7 - значение непрозрачности.

background-color: rgba (200,200,200,0,7);

источник

2013-11-21 22:21:10 user3005791

rgba не будет работать в IE8 и ниже. –

Вы можете использовать непрозрачность:

/* Note that opacity will apply to all descendant elements as well, */ 
/* so all your links/text/logo will inherit the opacity value as well.*/ 

.header { 
    opacity: 0.5; 
}

или дайте просто сделать фон полупрозрачным с помощью HSLA или RGBA.

.header { 
    background: #F00F00; /* background color for <IE8 */ 
    background: hsla(100, 50%, 50%, 0.5); 
    /* the last value (0.5) determines the opacity */ 
}

источник

2013-11-21 22:22:13

Примечание: hsla и rgba не будут работать в IE8 и ... –

@MikeBarwick yup, но это прогрессивное улучшение. IE8 и более низкие пользователи все равно смогут использовать сайт просто отлично без полупрозрачного фона :) –

Не будет ли фон возвращаться к цвету «черный»? –

Смежные вопросы