Как задать градиентную прозрачность блоку div?

Question

Есть блок с контентом. Как можно сделать так, чтобы была прозрачность с левого края, при этом этот блок (с контентом) постепенно становился видимым вплоть до 15% его ширины, и потом, начиная с 85% и заканчивая 100% снова становился прозрачным. В итоге должен получится эффект, будто его края прозрачные (со всем содержимым блока в этой области).

.test {
  width: 300px;
  height: 150px;
  background: #444;
  color: white;
  text-align: center;
}

<div class='test'>
Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum ipsumipsumLorem ipsum ipsumipsumLorem ipsum ipsumipsumLorem ipsum ipsumipsumLorem ipsum ipsum
</div>

Answer 1

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

.test {
  width: 300px;
  height: 150px;
  background: #444;
  color: white;
  text-align: center;
  position: relative;
}

.test::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, white, transparent 15%, transparent 85%, white);
}

<div class='test'>
Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum ipsumipsumLorem ipsum ipsumipsumLorem ipsum ipsumipsumLorem ipsum ipsumipsumLorem ipsum ipsum
</div>

БЛОГ НА HUSL

Как задать градиентную прозрачность блоку div?

Ответы (1 шт):