Как сделать полупрозрачный блок
Изменить (от 0 до 1):прозрачность всего блока
<style>
.raz {
padding: 1em;
font-size: 2em;
text-align: center;
background: #FFF5D7;
opacity: .5; /* создаёт новый контекст наложения */
}
</style>
<div class="raz">прозрачность всего блока</div>
Как сделать полупрозрачный фон для сайта
Изменить (от 0 до 1):прозрачность фона, но не текста
<style>
.raz {
padding: 1em;
font-size: 2em;
text-align: center;
background: rgba(255,245,215,.5); /* перевести HEX в RGB */
}
</style>
<div class="raz">прозрачность фона, но не текста</div>
Как сделать полупрозрачный градиент
Изменить (от 0 до 1):прозрачность градиента
<style>
.raz {
padding: 1em;
font-size: 2em;
text-align: center;
background-image: linear-gradient(rgba(255,0,0,.5), rgba(255,245,215,.5)); /* про градиенты */
}
</style>
<div class="raz">прозрачность фона, но не текста</div>
Комментариев нет: