CSS изолировать изображение от различий в режиме смешивания - PullRequest
Новая
       49

CSS изолировать изображение от различий в режиме смешивания

0 голосов
/ 01 октября 2019

Я применяю эффект темного режима к HTML, используя mix-blend-mode: разность. Все в порядке, кроме изображений, на которые также влияет наложение. Я попытался выделить элементы, используя: 

img {
    isolation: isolate;
}

или внутри контейнера 

.img-wrap {
    width: 45%;
    padding: 1%;
    position: relative;
    isolation: isolate;
    margin: 0 auto;
}

Я хочу оригинальное изображение. Вот как это выглядит: enter image description here

Это полный HTML 

#blender {
    width: 100vw;
    height: 100vh;
    left: 0pt;
    top: 0pt;
    position: fixed;
    background: white;
    transition: all 1s ease;
    mix-blend-mode: difference;
    pointer-events: none;
}

.img-wrap {
    width: 45%;
    padding: 1%;
    position: relative;
    isolation: isolate;
    margin: 0 auto;
}

img {
    isolation: isolate;
}

.darkmode-background {
    position: fixed;
    background: white;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}
<div>
    <div style="font-size: 16pt; font-weight: bold"><font face="Comic Sans MS">1. Words marathon</font>
        <div></div>
    </div>
</div>
<div>
    <div class="img-wrap"><img src="https://cdn.pixabay.com/photo/2012/04/13/13/19/clock-32380_960_720.png"></div>
    <br>
    <div><font face="Comic Sans MS">Ask students to make 5 cards each with any word in English. As a rule, it cannot be a name. If you are revising a certain chapter, the words can be from a category previously stated. Then put all the cards together and devide the students in 2 or 3 teams. One student from the first team comes to the front and picks a card and he/she has to describe it to his team. He/she has to describe as many words/cards as possible in 1 minute. The students from the other teams have to watch the time.&nbsp;</font></div>
    <div><font face="Comic Sans MS"><br></font></div>
    <div style="font-size: 16pt; font-weight: bold">
        <div><font face="Comic Sans MS">2. Bingo</font></div>
        <div><font face="Comic Sans MS"><br></font></div>
        <div></div>
    </div>
    <div><font face="Comic Sans MS"><img src="https://image.shutterstock.com/image-photo/bingo-filled-red-pencil-600w-773393032.jpg" alt="Bingo lot is filled in with red pencil"></font></div>
    <div><font face="Comic Sans MS">This is just like the traditional game of bingo, but instead of numbers, you have words. Students draw a table on their notebook and the teacher sets the topic. Then students write a word in each box. Teacher starts the game by saying words and students cross them out on their notebook. The student who has all the boxes crossed, shouts BINGO and is the winner. The game continues until all students get to Bingo.&nbsp;</font></div>
    <div><font face="Comic Sans MS"><br></font></div>
</div>
<div id="darkmode-container">
    <div class="darkmode-background"></div>
    <div id="blender"></div>
</div>

Если возможно, рабочий фрагмент кода, изолирующий изображение, будет фантастическим.

1 Ответ

1 голос
/ 01 октября 2019

Изолят не будет работать с вами. Просто увеличьте z-index изображений, чтобы сделать их выше слоя 

#blender {
  width: 100vw;
  height: 100vh;
  left: 0pt;
  top: 0pt;
  position: fixed;
  background: white;
  transition: all 1s ease;
  mix-blend-mode: difference;
  pointer-events: none;
}

.img-wrap {
  width: 45%;
  padding: 1%;
  position: relative;
  margin: 0 auto;
  z-index: 2;
}

img {
  position: relative;
  z-index: 2;
}

.darkmode-background {
  position: fixed;
  background: white;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}
<div>
  <div style="font-size: 16pt; font-weight: bold">
    <font face="Comic Sans MS">1. Words marathon</font>
    <div></div>
  </div>
</div>
<div>
  <div class="img-wrap"><img src="https://cdn.pixabay.com/photo/2012/04/13/13/19/clock-32380_960_720.png"></div>
  <br>
  <div>
    <font face="Comic Sans MS">Ask students to make 5 cards each with any word in English. As a rule, it cannot be a name. If you are revising a certain chapter, the words can be from a category previously stated. Then put all the cards together and devide the students in 2 or
      3 teams. One student from the first team comes to the front and picks a card and he/she has to describe it to his team. He/she has to describe as many words/cards as possible in 1 minute. The students from the other teams have to watch the time.&nbsp;</font>
  </div>
  <div>
    <font face="Comic Sans MS"><br></font>
  </div>
  <div style="font-size: 16pt; font-weight: bold">
    <div>
      <font face="Comic Sans MS">2. Bingo</font>
    </div>
    <div>
      <font face="Comic Sans MS"><br></font>
    </div>
    <div></div>
  </div>
  <div>
    <font face="Comic Sans MS"><img src="https://image.shutterstock.com/image-photo/bingo-filled-red-pencil-600w-773393032.jpg" alt="Bingo lot is filled in with red pencil"></font>
  </div>
  <div>
    <font face="Comic Sans MS">This is just like the traditional game of bingo, but instead of numbers, you have words. Students draw a table on their notebook and the teacher sets the topic. Then students write a word in each box. Teacher starts the game by saying words and students
      cross them out on their notebook. The student who has all the boxes crossed, shouts BINGO and is the winner. The game continues until all students get to Bingo.&nbsp;</font>
  </div>
  <div>
    <font face="Comic Sans MS"><br></font>
  </div>
</div>
<div id="darkmode-container">
  <div class="darkmode-background"></div>
  <div id="blender"></div>
</div>

Дополнительные сведения о том, как работает isolation: Как использовать комбинацию CSS в режиме смешивания-смешивания и изоляции?

...