Помощь с CSS

Герман Дудков

Всем доброго времени суток.
Подскажите пожалуйста как сделать так чтобы свойство opacity применялось только к одному блоку а не ко всем которые в нём находятся?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
<header>
<!--Должен быть прозрачным-->
    <h2>Заголовок сайта</h2>
        <!--не должен становится прозрачным-->
</header>
</body>

</html>

CSS
```
header{
color: black;
background-color: white;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
text-align: left;
border: 2px solid black;
margin-top: -9px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
padding-left:5px;
opacity: 0.5;
z-index: -1;

}
body{
background-image: url("https://www.hse.ru/data/2015/12/29/1136299454/1jDqYhCkOK0.jpg") ;
background-position: center;
}
h2{
background-color: cornflowerblue;
width: 335px;
border-bottom-left-radius: 7px;
padding: 4px;

margin-left: -5px;
margin-bottom: 0px;
margin-top: 0px;
z-index: 1;
}
h2:hover{
background-color: black;
color: white;
}
```

Герман Дудков 7 месяцев назадСпасибо 0
1 чел.