Przyciemnienie obrazka w tle

0

Cześć mam pewien problem dla niektórych pewnie banalny. Otóż mam w menu jako tło wstawiony obrazek w css chcę go przyciemnić jednak gdy dopisuje atrybut opacity obrazek od razu znika.

2

Daj jakiś kod i pokaż, jak to robisz. Bez tego ciężko cokolwiek napisać :P
Najlepiej wrzuć to na http://jsfiddle.net i podeślij tutaj link do działającej wersji.

2
background: linear-gradient( rgba(0,0,0,0.5), rgba(0, 0, 0, 0.5) ),url(../images/link-do-obrazka.jpg) no-repeat;
2

W sumie to nie lubię powielać odpowiedzi, ale że zacząłem pisać, zanim zauważyłem odpowiedź Skarpetkowego, to wyślę posta ;)

Tutaj masz działającą wersję tego, co podesłałeś - https://jsfiddle.net/gpjdq4xn/. Zauważ, że musiałem podmienić plik z tłem, bo w wersji wklejonej przez Ciebie, adres tła wskazywał lokalnie na jakiś plik na Twoim dysku, do którego oczywiście ja nie miałem dostępu.

Takie dwie uwagi:
1) nie wiem, czy nie byłoby prościej, żebyś zamiast kombinować z gradientami w tle (co może być problematyczne, gdyż niektóre przeglądarki mogą tego poprawnie nie wyświetlić) po prostu przerobić obrazek, który osadzasz w tle. Zrób z tego plik PNG i określ mu transparency na jakąś wartość. Potem go wklej jako tło i nie ustawiaj żadnego opacity w CSS - obrazek tła będzie przezroczysty, ale elementy-dzieci będą 100% widoczne
2) korzystając z gradientu zauważ, że możesz tam się bawić i to na przynajmniej dwa sposoby:

  • podajesz kolor gradientu na początku oraz końcu. Nie muszą one być takie same, możesz np. zrobić przejście z niebieskiego w czerwień
  • możesz określić inne wartości przezroczystości na obu krańcach, przez co tło może być bardziej przezroczyste z jednej strony, a im dalej, tym być mocniej widoczne

Poza tym zauważyłem, że w CSS miałeś taki fragment:

img{
  opacity: 0.2;
}

ale nigdzie w kodzie HTML nie widziałem elementów img - czy po prostu ten kawałek stylu został przez przeoczenie, czy może ma związek z próbą zrobienia przezroczystego tła?

1 użytkowników online, w tym zalogowanych: 0, gości: 1