Как сделать картинку полупрозрачной лишь на определённых блоках?

Question

[pashulke]

Н - непрозрачный, П - прозрачный.
Допустим, есть несколько блоков, как на картинке. Поверх них наложена картинка. Нужно сделать так, чтобы на непрозрачных блоках та часть картинки, которая расположена на нём, была непрозрачна, а на прозрачных часть картинки была на 50% прозрачна. Как это делается?

Answer 1

[tef]

Картинку положить под низ. Прозрачность задавать блокам.

Answer 2

[Егор Огурцов]

Если картинка поверх блоков - без JS не обойтись. Нужно высчитывать размеры блоков, делать доп. блоки с фоном поверх контента, соответственно позиционировать картинку в каждом и для каждого указывать прозрачность.

Comments

[pashulke]

Проблема ещё в том, что картинку можно перемещать по странице мышкой, то есть это не подходит, я так понимаю.

Answer 3

[The Dragger]

используй css градиент
П - картинкам можешь добавить
background: -moz-linear-gradient(top, rgba(255,0,4,0.5) 0%, rgba(255,0,4,0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,0,4,0.5)), color-stop(100%,rgba(255,0,4,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,0,4,0.5) 0%,rgba(255,0,4,0.5) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,0,4,0.5) 0%,rgba(255,0,4,0.5) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,0,4,0.5) 0%,rgba(255,0,4,0.5) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,0,4,0.5) 0%,rgba(255,0,4,0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ff0004', endColorstr='#80ff0004',GradientType=0 ); /* IE6-9 */

Comments

[pashulke]

И зачем здесь градиент?

[The Dragger]

точняк тебе же картинку надо а не текст сделать прозрачным