Jak przyciemnić obraz tła CSS?

Wyciągam z tego włosy. Próbowałem dosłownie wszystkiego, co znalazłem iw tym momencie zgaduję, że muszę po prostu popełnić jakiś błąd. Próbuję przyciemnić obraz tła, aby nie był tak nasycony.Jak przyciemnić obraz tła CSS?

Tu jest mój HTML:

<body id="home"> 
    <header> 
     <nav> 
      <ul class="pull-left"> 
       <li><a href="#">Bearbeard Logo</a></li> 
       <li><a href="#">World</a></li> 
      </ul> 
      <ul class="pull-right"> 
       <li><a href="#">Eretikas</a></li> 
       <li><a href="#">Custom</a></li> 
      </ul> 
      <div id="slogan">THE HERETIC SWORD</div> 
     </nav> 
    </header> 
</body>

A mój CSS:

#home { 
    background-image: url(file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
nav li { 
    display: inline; 
    position: relative; 
    float: left; 
} 
nav a { 
    color: #5a5a5a; 
    font-size: 11px; 
    font-weight: bold; 
    padding: 14px 10px; 
    text-transform: uppercase; 
} 
#slogan { 
    color: #FFFAF0; 
    font-family: 'Raleway', sans-serif; 
    font-weight: bold; 
    font-size: 18px; 
    opacity: 0.5; 
    text-align: center; 
    font-weight: bold; 
}

To daje mi tło, które całkowicie zakrywa stronę. Ale chcę go przyciemnić (bez zawisu lub kliknięcia). Wszystko, co próbowałem, NIE osiągnęło żadnego zaciemnienia (próbowałem fałszywych gradientów, rzeczy, itp.), I jakoś przeszkadzam w jedzeniu <div id="slogan"> i <nav>, przesuwając je po całym miejscu.

Czy moje formatowanie jest całkowicie niepoprawne?

Źródło

2015-07-26 theblackveil

Dlaczego nie modyfikować obraz 'hellcity.jpg' ciemniejsze? –

Próbuję nauczyć się, jak to zrobić za pomocą CSS, aby nie musieć edytować zdjęć w przyszłości (w przeciwieństwie do zwykłego korzystania z nich, gdy przychodzą i używają narzędzi w moim pasie narzędziowym, aby zrobić to za mnie). – theblackveil

Oto odpowiedź (http://stackoverflow.com/questions/11535392/how-to-decrease-image-brightness-in-css) na temat zmniejszania jasności, czy to pomaga? Polecam użycie odpowiedzi 'filter: brightness'. –

#home { 
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg'); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

This should work

Źródło

2015-07-26 00:42:38 Frankenmint

Więc, nie mam pojęcia, dlaczego ... Ale to się udało. Próbowałem tego wcześniej, napisane fragmentami rgba na ich własnych liniach (a może miałem tylko jedną rgba zamiast obu?). edytuj: Tak, nie wiem, jak pokazać, co robiłem wcześniej, aby ustalić, dlaczego działa to teraz, gdy nie działało wcześniej. : '/ Bez względu na to, czy możesz wyjaśnić, dlaczego to przyciemnia całe tło, gdy wszystkie inne pokazywane metody (i inne odpowiedzi na to pytanie SAME) tylko przyciemniają zawartość

Myślę, że twoje tagi nie były poprawnie sformatowane, a przed i po najechaniu: elementy ciała krwawiły do znaczników nav. Nie mogę tego wiedzieć bez cofnięcia się o kilka kroków i wklejenie źródła tutaj, aby potwierdzić. – Frankenmint

tylko po to, aby upewnić się, że Cię rozumiem, sugerujesz, że prawdopodobnie nie zamknąłem ani nie otworzyłem prawidłowo() lub {}, prowadząc do tej części instrukcji, jedząc te, które następują? To bardzo dobrze może być całkowicie poprawne. – theblackveil

utworzyć div pojemnik, który pasuje do 100% #home następnie:

#container { 
background: rgba(0, 0, 0, 0.5); 
}

0.5 = 50% przezroczystość ...

będzie to miało wpływ na ciemnienie obraz tła

Źródło

2015-07-26 00:42:21 LFX

Jest to jedna z metod, które wypróbowałem. To, co się dzieje, to ściemnienie elementów nav/ul zamiast tła. – theblackveil

jeśli dodasz kontener po ciele, ZANIM zrobisz nagłówek, to nie ma mowy, że mógłby to zaciemnić, chyba że użyjesz czegoś takiego jak z-index – LFX

@ theblackveil - Czy możesz dodać wszystkie metody, które wypróbowałeś? już na twoje pytanie? – BSMP

można ustawić tło na body i dodaj ciemniejszą warstwę z pseudo treścią za pomocą rgba() + alpha, a następnie zawiń całą zawartość do div i ustaw ją na position:relative, aby pozostała na wierzchu.

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
body { 
 
    background: url("http://lorempixel.com/400/200") center center no-repeat; 
 
    background-size: cover; 
 
    position: relative; 
 
} 
 
body:before { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; right: 0; top: 0; bottom: 0; 
 
    transition: background .5s; 
 
} 
 
body:hover:before { 
 
    /*for demo, move this line up if you want to darken it as default*/ 
 
    background: rgba(0,0,0, .5); 
 
} 
 
div { 
 
    position: relative; 
 
    color: white; 
 
}

<div>Hello world!</div>

Źródło

2015-07-26 00:49:26 Stickers

Pierwszy porządek obrad: Nie trzeba ID lub klasę na elemencie body

i drugi patrz poniższy kod.

body { 
 
    background: 
 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
 
    url(http://adityamehta.in/wp-content/uploads/2014/08/Sky-Blue-Sky.jpg); 
 
} 
 

 
nav a { 
 
    color: #5a5a5a; 
 
    font-size: 11px; 
 
    font-weight: bold; 
 
    padding: 14px 10px; 
 
    text-transform: uppercase; 
 
} 
 

 
nav li { 
 
    display: inline; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
#slogan { 
 
    color: #FFFAF0; 
 
    font-family: 'Raleway', sans-serif; 
 
    font-weight: bold; 
 
    font-size: 18px; 
 
    opacity: 0.5; 
 
    text-align: center; 
 
    font-weight: bold; 
 
}

<body> 
 
    <nav> 
 
     <ul class="pull-left"> 
 
      <li><a href="#">Bearbeard Logo</a></li> 
 
      <li><a href="#">World</a></li> 
 
     </ul> 
 

 
     <ul class="pull-right"> 
 
      <li><a href="#">Eretikas</a><li> 
 
      <li><a href="#">Custom</a><li> 
 
     </ul> 
 

 
     <div id="slogan">THE HERETIC SWORD</div> 
 
    </nav> 
 
    </body>

oryginalny obraz dzięki google :)

Źródło

2015-07-26 01:14:20

Dzięki za to. Całkowicie rozumiem twój pierwszy punkt, to było coś, co zrobiłem, próbując próbować nowych rzeczy. - -; Dziękuję, ale nie byłam do tego pozytywna. Druga kwestia, nie jestem pewien, czy podążam? Co nie powinno być w ciele? Próbuję tylko upewnić się, że wszystko robię dobrze idąc naprzód. – theblackveil

' Będę edytować mój post :) SORRY –

Dziękuję. Czy mógłbyś rozszerzyć temat, dlaczego nie powinno być wewnątrz ciała? Mam sekcję , która NIE jest wewnątrz ciała. Segment

pochodził z png z "Pięknego HTMLa" i myślałem, że ma on na celu oddzielenie zawartości nav od reszty strony. Doceniam twoją opinię. – theblackveil

Jak przyciemnić obraz tła CSS?

Odpowiedz

Powiązane problemy