• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Właściwość filter na background-image

VPS Starter Arubacloud
+1 głos
396 wizyt
pytanie zadane 8 lutego 2018 w HTML i CSS przez kralcz88 Obywatel (1,810 p.)

Witam!

Czy wie ktoś jak zastosować właściwość filter: grayscale(70%) dla obrazka które dodanego jako background-image w body?

body {
background-image: url('https://images.pexels.com/photos/160846/french-bulldog-summer-smile-joy-160846.jpeg?w=940&h=650&auto=compress&cs=tinysrgb');
background-size: cover;
height: 100vh;
background-repeat: no-repeat;
filter: grayscale(70%);
}

Wówczas inne elementy, które są umieszczone w body mają zaaplikowaną szarość. 

Można zamiast background-image, w kodzie HTML zrobić<img> i ostylować odpowiednio, ale wtedy zrobić kolejną warstwę za pomocą <div> i nałożyć ją na obrazek na obrazek z absolutną pozycją co pociąga za sobą dużo pozycjonowania dla kolejnych elementów, które będą pojawiać się w kodzie.

Może jest jakiś prostszy sposób?

komentarz 8 lutego 2018 przez Tomek Sochacki Ekspert (227,510 p.)
Nie da się na background-image dać filter, ale pomijając to, to pytanie czy na pewno Ci się takie coś opłaca? Można kombinować z <img> i odpowiednio go rozciągać i pozycjonować itd. tylko, że filter to w sumie dość wolne rozwiązanie. Owszczem, bardzo fajne i daje ciekawe efekty, sam z tego czasami korzystam, ale w przypadku całego tła strony myślę, że chyba lepiej po prostu przygotować obrazek "grayscale" i normalnie go wrzucić w background-image. Chyba, że planujesz jakieś dynamiczne zmienianie go no to pozostaje image, ale zastanów się, czy warto tak obciążać kompa użytkownika i czy na pewno jest to dobry pomysł na layout...
komentarz 8 lutego 2018 przez kralcz88 Obywatel (1,810 p.)
Dzięki za wskazówki. Jak się nad tym zastanawiam to masz zupełną rację :)
komentarz 8 lutego 2018 przez Tomek Sochacki Ekspert (227,510 p.)
Z własnego doświadczenia wiem, że czasem warto cofnąć się o krok i jeszcze raz przemyśleć problem i całą sytuację :)

Mnie np. osobiście bardzo denerwują wielkie grafiki na stronach, nie mówiąc już o video w tle... Oczywiście wszystko ma swoje miejsce. Jak najbardziej spodziewam się tego np. na stronie fotografa i tam w pełni akceptuję. Ale np. na stronie warsztatu samochodowego jest to dyskusyjne... Są miejsca gdzie szukasz tego łał, grafiki itp. (np. wizytówka fotografa ślubnego itp.) i są miejsca gdzie szukasz czystej informacji. Dobrze jest znaleźć zawsze równowagę.

To jednak oczywiście subiektywna ocena, jeden woli to, drugi co innego więc i tak zawsze developer musi podjąć decyzję, która jednym się spodoba, a innym nie, ot takie życie :)

2 odpowiedzi

0 głosów
odpowiedź 8 lutego 2018 przez EdeX Mądrala (5,110 p.)
wybrane 8 lutego 2018 przez kralcz88
 
Najlepsza
filter działa na obrazy ale nie obrazy jako background, możesz ustawić img na całego diva i wtedy dać filter
+1 głos
odpowiedź 8 lutego 2018 przez Yashe Dyskutant (7,720 p.)
Może pobierz zdjęcie na komputer i zmień link na ścieżkę do ów zdjęcia.

Podobne pytania

0 głosów
1 odpowiedź 450 wizyt
pytanie zadane 31 marca 2018 w HTML i CSS przez Leho99 Nowicjusz (200 p.)
+1 głos
2 odpowiedzi 867 wizyt
0 głosów
2 odpowiedzi 185 wizyt
pytanie zadane 5 maja 2017 w HTML i CSS przez artur321 Początkujący (350 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...