Если вы хотите сделать размытие текста только внизу блока, без использования позиционирования, вы можете воспользоваться свойством linear-gradient в свойстве background-image.
Вот как это можно сделать:
1. Создайте новый селектор для элемента, которому вы хотите добавить размытие текста. Например:
.blur-text {
background-image: linear-gradient(to bottom, transparent, white);
}
2. Укажите свойство background-image в значении linear-gradient, где to bottom означает, что градиент будет идти от верхней части элемента к его нижней части.
3. В значении linear-gradient используйте transparent для начального цвета градиента, а white для конечного цвета. Вы можете изменить эти цвета на любые другие, которые соответствуют вашему дизайну.
4. Для создания размытого эффекта установите значение transparent на том конце градиента, в котором вы хотите видеть размытие. В данном случае, мы хотим, чтобы текст был размыт в нижней части блока, поэтому мы устанавливаем transparent как начальный цвет градиента.
5. Примените этот класс к вашему элементу. Например:
<div class="blur-text"> Текст, который будет размыт </div>
Теперь текст внутри элемента с классом .blur-text будет размыт внизу блока без использования позиционирования. Вы можете настроить размытие, изменяя значения transparent и white в свойстве linear-gradient. Также вы можете добавить другие свойства стилей, чтобы изменить внешний вид элемента на ваше усмотрение.