Opacity/Blur warstwy - CSS

pytanie zadane 24 stycznia 2019 w HTML i CSS przez ziomek7 Obywatel (1,060 p.)

Dzień dobry jak ustawić przezroczystość lub rozmazanie elementu na którym jest nagłówek?

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div class="jumbotron jumbotron-fluid text-white text-center top">
		<div class="container">
            <div class="back">
			<h1 class="text-uppercase top-header">Odkryj <span class="text-color">nową jakość</span> filmu</h1>
			<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quam in nostrum?</p>
            </div>
		</div>
</div>

</body>
</html>

.top {
	padding: 165px 0 175px;
    margin: 0;
	background-image: url('https://i.postimg.cc/B6GzPD3t/montaz.jpg');
	background-position: 50% 50%;
	background-repeat: no-repeat;
    
}

.top-header {
	margin-bottom: 1.25rem;
	font-size: 2.75rem;
    color:  #f8f8f8;
    
}

.top-text {
	font-size: 1rem;
}

.text-color {
   color:#8AECEC;
}


.back {
  background-color: black;
    padding: 10px;
    width: 75%;
    margin: 0 auto;
    filter: opacity(.7);
}

Problem jest taki, że tekst też uzyskuje przeźroczystość?

Czy ktoś mógłby mi pokazać sposób jak to uzyskać na moim przykładzie?

https://codepen.io/anon/pen/rPaBLE

2 odpowiedzi

odpowiedź 24 stycznia 2019 przez imklau Nałogowiec (42,090 p.)
wybrane 24 stycznia 2019 przez ziomek7

Najlepsza

Najprościej po prostu stworzyć coś za pomocą pseudoelementów :before lub :after i to im nadawać tło + opacity.

komentarz 24 stycznia 2019 przez ziomek7 Obywatel (1,060 p.)

Przeczytałem przed chwilą artykuł i zrozumiałem działanie tego elementu. Ale dlaczego dodając go w mojej sytuacji nie działa? Tło przeniosłem i nie chce działać

.back {
  
    padding: 10px;
    width: 75%;
    margin: 0 auto;
    
}

.back:before {
  background-color: black;
    
}

komentarz 24 stycznia 2019 przez imklau Nałogowiec (42,090 p.)

Dlatego, że jak widać nie doczytałeś w jaki sposób tworzyć pseudoelementy :)

komentarz 24 stycznia 2019 przez ziomek7 Obywatel (1,060 p.)

Wybacz, poradnik był z 2013 roku :D

Czyli głównym błędem jest tu brak podwójnego dwukropka.

I te pseudo elementy muszą odnosić się do jakiegoś "ciała".

Ale nadal nie wiem jak dodać do tych elementów tła :(

komentarz 24 stycznia 2019 przez Byczek_ Bywalec (2,570 p.)

@ziomek7, .back::before{} - Pseudo-elementy tworzymy za pomocą dwóch dwukropków.

komentarz 24 stycznia 2019 przez imklau Nałogowiec (42,090 p.)

nope, błędem nie jest brak podwójnego dwukropka :P

komentarz 24 stycznia 2019 przez ziomek7 Obywatel (1,060 p.)

to w takim razie poprosiłbym o podpowiedź ;)

tekst do tego elementu jestem w stanie dodać ale z tłem nie wychodzi...

komentarz 24 stycznia 2019 przez imklau Nałogowiec (42,090 p.)

poświęć 13 minut https://www.youtube.com/watch?v=rR6I0e4z1us :)

komentarz 24 stycznia 2019 przez ziomek7 Obywatel (1,060 p.)

Obejrzałem drugi raz ten poradnik (pierwszy raz po tym starym artykule) i teraz bardziej się skupiłem :D

Dziękuje bardzo za pomoc!

Napisałem taki kod, rozwiązuje on problem. Czy jest on dobrze napisany?

.back {
  
    padding: 10px;
    width: 75%;
    margin: 0 auto;
    align-items: center;
    position: relative;
    z-index: 1
}

.back::before {
    background-color: black;
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
    opacity: 0.7;
    filter: blur(2px);
}

I jeszcze pytanie czy standardowo nadawać tło za pomocą pseudo elementów? Raczej tego unikać i edytować np. zdj w Photoshop lub dodawać standardowo?

komentarz 24 stycznia 2019 przez imklau Nałogowiec (42,090 p.)

generalnie tak, to czego brakowało to właśnie content + wymiarów.

Co do Twojego pytania to hmm raczej tła za pomocą tych pseudoelementów się nie dodaje. Jeśli masz dobrze przygotowany projekt, czy też materiały od dizajnera to lepiej wrzucić od razu jakieś tam lekko przerobione zdjęcie :P

A jeśli zdjęcia miałyby być dodawane przez użytkownika (jak w przypadku CMSów typu WordPress) no to jednak już trzeba to CSS odziergać :)

odpowiedź 24 stycznia 2019 przez k.wichura Pasjonat (19,870 p.)

Odpowiedzia jest RGBA

.back {
    padding: 10px;
    width: 75%;
    margin: 0 auto;
  background:rgba(0,0,0,0.7);
}

komentarz 24 stycznia 2019 przez ziomek7 Obywatel (1,060 p.)

a jak to robią "profesjonaliści", nie ma jednego idealnego rozwiązania i opacity, blur można ustawić jak się chce (w Photoshop do zdj, czy css innym sposobem)?

a jeżeli chciałbym zastosować blur zamiast opacity, czy mozna dodac do koloru rgba rozmycie?

komentarz 24 stycznia 2019 przez k.wichura Pasjonat (19,870 p.)
edycja 24 stycznia 2019 przez k.wichura

rgba - jest to ilosc koloru czerwonego, ilosc koloru zielonego, ilosc koloru niebieskiego, alpha czyli przezroczystość. Nie widze sposobu uzyc rgba jako blur. Nie wiem co chesz osiagnac, ale zawsze mozna dac blur na cos pod spodem, a na to postawic diva z rgba.

Sprobuj taj jak mowi @Noemi. Na element daj blur, a na before background: rgba(0,0,0,0.7)

komentarz 24 stycznia 2019 przez ziomek7 Obywatel (1,060 p.)

Chodzi mi o to, że ten pasek(https://postimg.cc/CBFL38zJ), albo tło miało lekkie rozmycie aby tekst był lepiej widoczny.

Próbowałem już dać blura pod spód np. tło ale wtedy wszystkie elementy są rozmazane.

////

a z tym sposobem Noemi to nie wiem jak go poprawie zaimplementować