É possível graduar a opacidade de um elemento HTML?

eu quero um<div> elemento (todo o elemento, conteúdo e tudo) para desaparecer em direção ao fundo. É para truncar um post de notícias que tem que se encaixar em um espaço muito restritivo (e pode conter elementos de tamanho imprevisível).

Tudo o que consegui encontrar é o uso de um gradiente de transparência em uma cor de plano de fundo. O que seria bom, exceto por trás do post de notícias é uma imagem de fundo, então eu não posso simplesmente colocar um gradiente de cor por cima da parte inferior do conteúdo.

Eu coloquei um gradiente de imagem por cima do conteúdo, mas o fundo se move atrás do conteúdo enquanto o usuário rola.

Então imagine isso existiu:

opacity: -webkit-linear-gradient( ... );

graduar o realopacidade do elemento é a única coisa que vai funcionar. É possível?

questionAnswers(6)

yourAnswerToTheQuestion