css размытие: исключение детских элементов из размытия родителей

] При применении фильтра размытия к родительскому элементу с использованием CSS неизбежно, что дочерние элементы также унаследовали эффект. Тем не менее, существует решение, чтобы освободить дочерние элементы от этой размытости без использования абсолютного позиционирования.

для достижения этого создайте два вложенных DEAV в родительском Div: один для фона и другой для содержания. Назначьте «позицию: относительно» родительскому div и «позиция: Absolute; Top: 0px; справа: 0px; внизу: 0px; слева: 0px;» (или установите высоту/ширину на 100%) на фоновой див. Это гарантирует, что фоновый диг полностью охватывает родительский Div.

, отделяя фоновый элемент от элемента содержимого, фильтр размытия, применяемый к фоновым Div, не повлияет на дочерний элемент, содержащий текст или другое желаемое содержание. позиция: относительно; высота: 100px; Ширина: 100px; } #фон { позиция: абсолютно; Верх: 0; слева: 0; Справа: 0; Внизу: 0; фоновый цвет: красный; Фильтр: размытие (3PX); z -index: -1; }