Полупрозрачный фон css

Полупрозрачный фон блока на CSS

Сегодня рассмотрим как сделать полупрозрачный фон с помощью CSS.

Для этого просто создадим подложку из рисунка с измененным свойством прозрачности.

<div style=’width:30%;position:relative; ‘>

<img src="1.jpg" alt="" style='opacity:0.5;z-index:-9999;position:absolute; width:100%; height:100%'>
<h1>zagolovok</h1>
<p>sfs sdfsdfsfsf sdf sdhfghgs sagsb sghsdg sgdnxcz sgdfxfg sgsdhgd sgdf sdfsa</p>

</div>

В итоге получили вот такой эффект

Полупрозрачный фон css
А если мы не собираемся использовать фоновый рисунок, то все очень упрощается! Просто в стилях блоку которому мы хотим присвоить полупрозрачный фон в свойствe backrgound укажем цвет через rgba(0,0,0,0.5) первые три параметра задают цвет в модели RGB, а четвертый прозрачность от 0 до 1.

Например вот так

<div style=’ background:rgba(0,0,0,0.5); ‘ >

<p>adsdf asdf adfad asdfsdfdf</p>
</div>


Добавить комментарий