Чтобы добиться полупрозрачного фона с помощью CSS, есть как минимум 2 способа, которые сразу в голову приходят – с использованием полупрозрачного png изображения или с использованием RGBa ("a" – значит alpha) для цвета фона. Работает это в современных браузерах, начиная с IE 9. В Chrome, Firefox и т.п. работает очень давно.

Ниже примеры использования фона с альфа-каналом RGBa.

Для 30% заполнения:

<div style="background-color:rgba(0, 0, 0, 0.3);">
<div>Надпись на фоне с непрозрачностью 30%.</div> </div> 

 

Для 50% заполнения:

<div style="background-color:rgba(0, 0, 0, 0.5);">
<div>Надпись на полупрозрачном фоне.</div> </div>

 

Для 80% заполнения:

<div style="background-color:rgba(0, 0, 0, 0.3);">
<div>Надпись на фоне с непрозрачностью 80%.</div> </div>