Сделайте так, чтобы определенные базовые элементы вели себя / визуализировались как наложение - PullRequest
Новая
       12

Сделайте так, чтобы определенные базовые элементы вели себя / визуализировались как наложение

0 голосов
/ 23 февраля 2019

Как можно сделать так, чтобы только некоторые дочерние элементы были четко видны, когда родительский элемент непрозрачен, не влияя на производительность рендеринга страницы?

Я пытаюсь создать определенные элементы под наложением реагировать и отображаться , как если бы они были выше оверлея .

  • есть ли способ в CSS повлиять на визуализацию специфических подложка элементов при смешивании с оверлеем?Или mix-blend-mode работает только сверху вниз?(например, я бы хотел сказать просто .visible, чтобы он смешивался с оверлеем по-разному; в то время как все остальное внизу должно иметь нормальное смешение)

  • - это filter работает только на выбранном элементе?Не влияет ли это на рендеринг нижележащих элементов, когда выбранный элемент имеет непрозрачность?(например, сделать оверлей сделать все ниже в оттенках серого)

И, так как я предполагаю, что ответы на оба вопроса выше не помогут мне, фактический вопрос:

  • Можно ли визуально компенсировать на элементах .visible эффект помутнения

Примечание:

Я знаю, что одно решение можетиспользовать селектор: 

div.data :not(.visible) { opacify: .5; }

вместо использования оверлея , но я сомневаюсь, как бы производительность (особенно на не мощных мобильных устройствах) пыталась применить opacify к тысячи из .data -элементов, которые будут :not(.visible).Кроме того, click | hover на непрозрачных / отключенных элементах не будет предотвращен (хотя я хочу просто щелкнуть по области .visible, которую нужно поймать).

Есть ли эффективное решение?Или то, что я спрашиваю, в наши дни невозможно?

Я пытался написать пример фрагмента, но не смог найти способ решить мою проблему.

Javascript также принят

Приоритет состоит в том, чтобы иметь этот визуальный / функциональный эффект с приличными характеристиками на обычном мобильном телефоне, когда число li превышает 100 и каждый из них содержит 100 элементов DOM. 

/* structure */
div.data { display: table; }
ul { display: table-row-group; }
li { display: table-row; }
li > div { display: table-cell; }
/* style */
li > div.content { color: red; }
.visible { color: green; border: 1px dashed black; padding: 0 5px; }
/* Overlay */
.data:after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
}
/* reduce emphasis */
.data:after {
  background-color: white;
  opacity: .5;
}
/* visual "disabled" effect */
.data:after {
  filter: grayscale(100%);
}
<div class="data">
  <ul>
   <li>
    <div class="content">Foobar1</div>
    <div>
     <span class="content">other content</span>
     <span class="visible">
      Not opaque
      <input type="checkbox" checked />
     </span>
    </div>
   </li>
   <li>
    <div class="content">Foobar2</div>
    <div>
     <span class="content">other content</span>
     <span class="visible">
      Not opaque
      <input type="checkbox" />
     </span>
    </div>
   </li>
  </ul>
</div>
...