Mam div dla mojego nagłówku, który używa pozycji: naprawiony w CSS, aby pozostać na miejscu. Chciałbym jednak dodać pewną przejrzystość na Div (tło Div, który wykorzystuje #color), gdy pod nim przewijana zawartość.

Czy to możliwe w CSS? Mój zakład jest w jakimś JavaScript (być może jQuery)? Nie jestem zaznajomiony z JS, jakiś przykład byłby świetny.

Dzięki Andrei.

PS: Nie używam żadnych obrazów na tle strony lub nagłówka.

1
Popa Andrei 22 listopad 2013, 02:15

4 odpowiedzi

Najlepsza odpowiedź

Możesz to osiągnąć, ustawienie opacity na div. Wartości 0-1 Im niższa wartość, tym bardziej przezroczyste div.

JQuery

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

Można również zrobić w zwykłym CSS

#divId {
    opacity:.4;
}

Aktualizuj

Jeśli chcesz, aby twój nagłówek był przezroczysty podczas przewijania, musisz zrobić coś takiego za pomocą jQuery:

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

Aktualizacja 2

Jeśli chcesz, aby twój nagłówek był przezroczysty, gdy okno jest przewijane.

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

Przykład

http://jsfiddle.net/vzu9k/

1
Trevor 21 listopad 2013, 22:42

Aby ustawić krycie na tle, musisz użyć RGBA zamiast kodu szesnastkowego koloru tła. Możesz to zrobić za pomocą CSS:

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

Pierwsze trzy liczby są czerwone, zielone, niebieskie i mogą wahać się od 0 do 255, ostateczna liczba jest krycie, który ma zakres .0 (0%) do 1 (100%).

Aby uzyskać szybkie konwersje z kodu szesnastkowego do RGB zazwyczaj używam strony jak: http: //www.javAscripter .NET / FAQ / hextorgb.htm

Josh.

1
Joshua Robinson 21 listopad 2013, 22:20

Możesz ustawić kolor tła w CSS tej div. 0,7 jest wartością krycia.

Background-Color: RGBA (200,200,200,0,7);

0
user3005791 21 listopad 2013, 22:21

Możesz użyć krycia:

/* 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;
}

Lub daj tylko uścisnąć tła przezroczyste przy użyciu HSLA lub RGBA.

.header {
    background: #F00F00; /* background color for <IE8 */
    background: hsla(100, 50%, 50%, 0.5); 
    /* the last value (0.5) determines the opacity */
}
0
Mark Simpson 21 listopad 2013, 22:27