Линейная непрозрачность CSS

Question

Я хочу создать некоторые плоские UI-блоки, но мне нужна небольшая помощь. Я прошел через некоторые направляющие с линейным градиентом (слева, rgba (255,255,255,0), rgba (255,255,255,1)); и так далее, но я не нашел того, что мне действительно нужно.

Есть ли способ, как сделать любой слой с линейной непрозрачностью? У меня довольно обширная база данных изображений (так что я определенно не могу сделать Photoshop, чтобы иметь непрозрачность сама по себе), и я загружаю ее во многие «div» в качестве фонового изображения. Но мне нужно, чтобы divs стали прозрачными примерно в 75% от его ширины.

Как это возможно в CSS?

Существует то, что мне нужно достичь:

Answer 1

Я боюсь, что подобное использование невозможно с помощью CSS. Поскольку у вас есть много изображений, и если вы не показываете слишком многие из них сразу же, вы можете рассмотреть возможность использования canvas для придания непрозрачности каждого изображения:

http://jsfiddle.net/u256zkha/

Answer 2

Вы можете установить линейный градиент фон с дополнительной остановкой, чтобы сделать элемент прозрачного 75% от его ширины, а затем линейно увеличивать непрозрачность.

Например:

background: linear-gradient(
    to right, 
    rgba(0,0,0,1) 0%, 
    rgba(0,0,0,1) 75%, 
    rgba(0,0,0,0) 100% 
); 

Это делает элемент имеет непрозрачный черные (три первых значений rbga) фон для 75% от его ширины, а затем линейно перехода к прозрачному в его крайнем правом 25%.