Всем привет! Имеется HTML код:
<div class="opacity-img">
<div class="container">
<h1>Evgeniy Sobaka</h1>
<div class="imgRounded">
<img class="personPhoto" src="img/iAM.png" />
</div>
</div>
</div>
К нему подключен CSS:
.imgRounded {
border-radius: 50%;
width: 300px;
height: 300px;
margin: 0 auto;
overflow: hidden;
margin-bottom: 20px;
z-index: 999999 !important;
opacity: 1 !important;
}
.personPhoto {
width: auto;
height: 100%;
margin: 0 auto;
margin-bottom: 20px;
z-index: 999999 !important;
opacity: 1 !important;
}
.opacity-img {
background-image: url(img/asphalt.jpg);
opacity: 1;
z-index: 2;
margin: 200px;
border-radius: 24px;
}
.container {
padding: 1em;
background-color: rgb(212, 121, 2);
border-radius: 24px;
box-shadow: 4px 4px 8px rgba(28, 29, 28, 0.9);
opacity: 0.4;
}
Как избежать наложение прозрачности и эффекта от картинки на изображении? Сейчас получается вот так:
.container
opacity: 0.4;
, а в контейнере находится картинка: следовательно и картинка прозрачная. Уберите там opacity, и всё