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