Блог

Главная - Вопросы по программированию - HTML CSS Не может видеть элемент OpenSeadragon Viewer

HTML CSS Не может видеть элемент OpenSeadragon Viewer

#html #jquery #css #z-index #openseadragon

Вопрос:

Я думаю, что мне не хватает чего-то простого. Я использую OpenSeadragon viewer (экранное меню) и хотел бы вставить плавающий текст поверх изображений. Что бы я ни делал, зритель всегда на высоте. Я вижу, как текст вспыхивает, но затем зритель все это скрывает. HTML с помощью средства просмотра является:

 <body>
    <div class="demoarea">
        <div id="toolbarDiv" class="toolbar">
            ...
        </div>
        <div id="contentDiv" class="openseadragon"></div>
    </div>
</body>

Я создал несколько тегов в попытке отобразить текст, плавающий над средством просмотра:

     #watermark {
        -webkit-transform:rotate(-20deg);
        -moz-transform:rotate(-20deg);
        -o-transform:rotate(-20deg);
        transform:rotate(-20deg);
        font-size:200px;
        color:#CCC;
        font-weight:bold;
        letter-spacing:40px;
        position:absolute; 
        z-index:1000000; 
        top:20%;
        left:15%;   
        opacity:0.5; 
        filter:alpha(opacity=50);
    }
    
    .watermark {
        -webkit-transform:rotate(-20deg);
        -moz-transform:rotate(-20deg);
        -o-transform:rotate(-20deg);
        transform:rotate(-20deg);
        font-size:200px;
        color:#CCC;
        font-weight:bold;
        letter-spacing:40px;
        position:absolute; 
        z-index:1000000; 
        top:20%;
        left:15%;   
        opacity:0.5; 
        filter:alpha(opacity=50);
    }
<p>Top</p>
<div id="watermark" style="display:block;">Top</div>
<h1>Top</h1>
<div id="watermark" class="watermark">
    Top
    <span>Top</span>
</div>

Я постарался сделать текст как можно более неприятным, чтобы, если он быстро мигнет, я все равно мог его видеть. Это именно то, что происходит. Несколько экземпляров «Верхнего» текста видны в течение доли секунды, а затем скрыты зрителем.

Когда я смотрю на CSS-элементы средства просмотра, z-индекс класса fullpage составляет 999999. Я установил свой CSS z-индекс на 1000000, так что он должен быть сверху, но это не так.

У кого-нибудь есть другие идеи?

Спасибо.

Это средство просмотра со всеми главными текстовыми сообщениями.

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

1. Не могли бы вы разместить фрагмент, который показывает проблему? Я мог только размышлять о том, есть ли у вас проблема с контекстом стекирования или нет, поскольку я не знаю, как все сочетается в вашем коде.

2. @AHaworth — Извините, что только что это увидел. Это не так просто, так как загрузка средства просмотра экранного меню занимает довольно много кода.

3. Вы выходите на полный экран? Экранное меню в этом случае перемещается по элементам. В противном случае этого не должно быть. Я бы с удовольствием посмотрел на упрек. Вы могли бы начать с codepen.io/iangilman/pen/bdgWBz в качестве основы.

Ответ №1:

Очень интересно. Это похоже на то, как если бы зритель удалял все элементы, которые он не распознает. Когда я просматриваю HTML после того, как он нарисован, добавляемых мной элементов нигде нет. Я не уверен, что моя оценка верна, но я добавил Div с помощью jQuery после того, как зритель нарисован, и это сработало как чемпион.

 if (!watermark) {
    watermark = $('body').append($('<div/>', {id: 'watermark', class: 'watermark'}));
} // iif
Метки: