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

Przyciemnianie tła diva bez przyciemniania zawartości

VPS Starter Arubacloud
0 głosów
1,346 wizyt
pytanie zadane 5 czerwca 2018 w HTML i CSS przez yato_ Początkujący (350 p.)
edycja 6 czerwca 2018 przez yato_

Witam, próbuję zrobić menu, które zawiera divy z obrazkiem w tle i po najechaniu myszką obrazek ten miałby się przyciemniać i pojawiać podpis na środku diva, lecz gdy próbuję to zrobić w poniższy sposób to tekst również się przyciemnia. Zna ktoś może jakieś optymalne rozwiązanie?

<section id=menu>
                <section class=row>
					<div class=square id=tajmahal><a href=xd.html>TAJ MAHAL</a></div>
					<div class=square id=mur><a href=xd.html>WIELKI MUR CHIŃSKI</a></div>
                </section>
</section>
.row{
	display: flex;
	justify-content: center;
    text-align: center;
    clear: both;
    margin: 0 auto;
}

.square{
    width: 18vw;
    height: 25vh;
    background-size: cover;
    float: left;
    margin: 1%;
}
.square:hover{
	filter: brightness(40%);
	
}
#menu a{
	display:flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	color: #fff;
	text-decoration: none;
	width: 18vw;
    height: 25vh;
}
#menu a:hover{
	display:flex;
	cursor: pointer;
	opacity: 1;
}
#tajmahal{
    background: url(pic/tajmahal.jpg);
    background-size: cover;
}
#mur{
    background: url(pic/mur.jpg);
    background-size: cover;
}

http://jsfiddle.net/3uqjkgn2/2/

2 odpowiedzi

+1 głos
odpowiedź 5 czerwca 2018 przez BT101 Stary wyjadacz (12,540 p.)
wybrane 6 czerwca 2018 przez yato_
 
Najlepsza

Użyj rgba


Po przyjżeniu się w kod z jsfiddle'a:

  • Nie styluj po tych cholernych IDkach bo to psuje specificity CSS'a ID są "ważniejsze" od class i nie da się potem tego nadpisać...
  • W tym wypadku jak to ma być przyciemnione tło to możesz użyć sztuczki:

 

background: 
    linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), 
    url(https://img01-olxpl.akamaized.net/img-olxpl/389209659_2_644x461_stol-lawostol-kwadratowy-dodaj-zdjecia.jpg);

tutaj masz poprawione demo.

komentarz 5 czerwca 2018 przez yato_ Początkujący (350 p.)
Masz na myśli rgba zamiast opacity do "zniknięcia" tekstu przed najechaniem? Czy zamiast brightness do tła?
komentarz 5 czerwca 2018 przez BT101 Stary wyjadacz (12,540 p.)
W obu
komentarz 5 czerwca 2018 przez yato_ Początkujący (350 p.)
Pokażesz mi to na przykładzie mojego kodu?
komentarz 5 czerwca 2018 przez BT101 Stary wyjadacz (12,540 p.)
Stwórz jsfiddle z tym kodem i daj link
komentarz 6 czerwca 2018 przez yato_ Początkujący (350 p.)
komentarz 6 czerwca 2018 przez BT101 Stary wyjadacz (12,540 p.)
Zobacz edycje odpowiedzi.
komentarz 6 czerwca 2018 przez yato_ Początkujący (350 p.)
Dzięki wielkie ^^
0 głosów
odpowiedź 5 czerwca 2018 przez Zelek Użytkownik (960 p.)
background:rgba(0,0,0,0.5);
komentarz 5 czerwca 2018 przez yato_ Początkujący (350 p.)
Mógłbyś pokazać mi, gdzie dokładnie w kodzie mam tego użyć?
komentarz 5 czerwca 2018 przez Zelek Użytkownik (960 p.)
section#menu {
background:rgba(0,0,0,0.5);
}

 

Ostatnia wartość "0.5" to skala przyciemnienia. Pamiętaj, że tę wartość możemy zmieniać od 0 do 1 :)
komentarz 6 czerwca 2018 przez yato_ Początkujący (350 p.)
Nie bardzo działa, to zmienia tło za zdjęciami na w połowie czarne

Podobne pytania

0 głosów
2 odpowiedzi 4,940 wizyt
pytanie zadane 8 kwietnia 2016 w HTML i CSS przez Paweł123 Nałogowiec (33,500 p.)
0 głosów
2 odpowiedzi 728 wizyt
pytanie zadane 6 lutego 2019 w HTML i CSS przez Krystian Strycharz Początkujący (260 p.)
0 głosów
0 odpowiedzi 2,567 wizyt
pytanie zadane 4 lipca 2019 w JavaScript przez Ebay_05 Początkujący (400 p.)

92,840 zapytań

141,781 odpowiedzi

320,856 komentarzy

62,172 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

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!

...