Jak przyciemnić obrazek, ale nie tekst który jest na nim

pytanie zadane 24 lutego 2018 w HTML i CSS przez timati Bywalec (2,060 p.)

Hej, robię stronę internetową i mam pewien problem. Otóż w tle zaraz pod paskiem nawigacyjnym dodaję tło, któremu ustawiam filtr

filter: brightness(50%);

Na tym obrazku mam też tekst, który przyciemnia się razem z tym obrazkiem. W jaki sposób zrobić tak, żeby ten tekst został w normalnej jasności ?

Moja sekcja body :

<body>
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand"></a>
                </div>
            <ul class="nav">
                <li><a href="#">Strona Główna</a></li>
                <li><a href="#">O nas</a></li>
                <li><a href="#">Realizacje</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
            </div>
        </nav>
        <section class="sec1">
            <div class="container" id="slogan">
                    <row text-center>
                        <div class="col-md-12">
                            <h1 class="mb8 uppercase">Doskonałe meble na wymiar</h1>
                            <h4></h4>
                        </div>
                    </row>
                </div>
        </section>
    </body>

i plik css :

section.sec1{
    margin-top: 59px;
    width: 100%;
    height: 100vh;
    background: url(back.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    color: #ffffffff;
    box-sizing: border-box;
    filter: brightness(50%);
    z-index: 1;
}

h1.uppercase {
    text-align: center;
    letter-spacing: 6px;
    font-family: 'Karla', sans-serif;
    text-transform: uppercase;
    margin: 0;
    font-size: 70px;
    transform: translateY(200%);  
}

PS: Czy znacie jakieś tutoriale na youtube gdzie właśnie są robione takie nowoczesne strony internetowe z użyciem html,css,js i jquery ?

komentarz 24 lutego 2018 przez mi-20 Stary wyjadacz (13,190 p.)

W kursie p.M.Z jQuery chyba było o tym, przyciemnianie obrazka, polecam.

https://www.youtube.com/watch?v=edNqTubHUU0

komentarz 24 lutego 2018 przez dervil Gaduła (3,030 p.)

gwincik wymiata :D

4 odpowiedzi

odpowiedź 24 lutego 2018 przez timati Bywalec (2,060 p.)

odpowiedź 24 lutego 2018 przez JackNaifu Nowicjusz (200 p.)

Radzę po prostu nie używać: filter: brightness(50%);
Zamiast tego możesz uzyskać ten sam efekt bez problemów tworząc div zaraz po obrazku który wypełnisz w ten sposób:

#filtr::before {
    content: '';
    display: block;
    position: absolute;
    background-color: #000;
    opacity: 0.5;
    width: 100%;
    height: 100%;
}

Efekt jest identyczny, i nie taka problematyczny.

Twój kod html wyglądałby teraz tak:

        <section class="sec1">
          <div id="filtr">
              <div class="container" id="slogan">
                    <row text-center>
                        <div class="col-md-12">
                            <h1 class="mb8 uppercase">Doskonałe meble na wymiar</h1>
                            <h4></h4>
                        </div>
                  </row>
            </div>
  </section>

Co do twojego drugiego pytania, to aby nałożyć efekt po najechaniu myszką używa się selektora :hover
Np:

section.sec1:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
}

Czas, w którym ma zostać wywołane przejście ustalasz już w zwykłej klasie poprzez transition-duration: 2s;

odpowiedź 25 lutego 2018 przez EdeX Mądrala (5,110 p.)

odpowiedź 25 lutego 2018 przez timati Bywalec (2,060 p.)

Dzięki za pomoc. Udało mi się to wykonać. Mam do was prośbę. Czy mógłby ktoś spojrzeć na ten kod i powiedzieć co jest w nim nie tak ?

HOME : https://pastebin.com/8bN03MLB

Style : https://pastebin.com/T7Kf5JKH

Jest to moja pierwsza strona i jakoś chyba pomieszałem w kodzie html, bo teraz jeżeli chcę dodać kolejnego diva kontakt to wjeżdża mi on na poprzedniego... nie wiem co jest nie tak z siatką bootstrapa. Z góry dziękuję za pomoc.