Блог

Главная - Вопросы по программированию - При размытии содержимого размытие происходит поверх содержимого, но размытие происходит под исходным текстом заголовка ASP.NET JavaScript

При размытии содержимого размытие происходит поверх содержимого, но размытие происходит под исходным текстом заголовка ASP.NET JavaScript

#javascript #html #asp.net #blur

#javascript #HTML #asp.net #размытие

Вопрос:

 var pageContent = document.getElementById("mainContent"),
        pagecopy = pageContent.cloneNode(true),
        blurryContent = document.getElementById("blurryscroll");
    blurryContent.appendChild(pagecopy);
    window.onscroll = function () {
        blurryContent.scrollTop = window.pageYOffset;

    }

С помощью этого скрипта мне удается размыть I-Frame, но текст H1 остается «поверх» размытого H1.

Почему это происходит?

PS. Я следовал этому подходу: https://codepen.io/anon/pen/moqZRB

В данном примере текст H1 размыт, в моей реализации текст становится размытым, но исходный не размытый текст остается поверх размытого, вместо того, чтобы оставаться «за» размытым текстом.

Комментарии:

1. Вы играли с CSS-атрибутами «z-index»? Попробуйте установить более высокий z-индекс для элемента размытия

2. я сразу же это проверю.

3. нет, кажется, что изменение этого значения ни на что не влияет. Я никогда не менял z-индекс. Странно то, что только текстовые элементы данного div остаются поверх размытого элемента.

4. есть ли живая демонстрация вашего кода?

5. нет, он все еще находится на localhost