Смешать фон режима наложения с дочерним содержимым без изменений - PullRequest
Новая
       29

Смешать фон режима наложения с дочерним содержимым без изменений

1 голос
/ 08 апреля 2019

Я пытаюсь использовать режим смешивания, чтобы создать фон с наложением с эффектом многократного использования, который также показывает часть фона. Мне также нужно, чтобы дочерний контент не зависел от режима наложения. Как это:

mix-blend-mode with child content unaffected

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

То, что я смог получить до сих пор: Я могу заставить работать фон и оверлей, но эффект распространяется и на слой контента: https://codepen.io/orlafitz/pen/JVRQpM

    .bkg-image {
      background-image: url(https://poppyvine.com/wp-content/uploads/2019/04/beach-bw.jpg);
      text-align: center;
      padding: 100px 0px;
      background-size: cover;
      background-position: center;
    }
    
    
    .multiply-overlay {
        background-color: #323ff0;
        mix-blend-mode: multiply;
        padding: 50px
    }
    
    .bkg-image .content {
      color: #fff;
      isolation: isolate;
    
    }
    <div class="bkg-image">
    	 <div class="multiply-overlay">
        <div class="content">
    		  <h1>Margins to show bkg img<br>&<br>Content unaffected by blend mode</h1>
        </div><!-- content -->
    	 </div><!-- multiply-overlay-->
    </div><!-- bkg img -->

Кто-нибудь знает, возможно ли этого добиться?

Ответы [ 2 ]

1 голос
/ 08 апреля 2019 

.bkg-image {
  background-image: url(https://poppyvine.com/wp-content/uploads/2019/04/beach-bw.jpg);
  text-align: center;
  padding: 100px 0px;
  background-size: cover;
  background-position: center;
}

.overlay {
  position: relative;
  padding: 50px
}

.background {
    background-color: #323ff0;
    mix-blend-mode: multiply;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.content {
    position: relative;
}

.bkg-image .content h1 {
  color: white;
  isolation: isloate;
}
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
<title>Test Blend Modes</title>
</head>
<body>

<h2>Live:</h2>

<div class="bkg-image">
	 <div class="overlay">
     <div class="background"></div>
     <div class="content">
		  <h1>Margins to show bkg img<br>&<br>Content unaffected by blend mode</h1>
    </div><!-- content -->
	 </div><!-- multiply-overlay-->
  
</div><!-- bkg img -->

<h2>Should look like:</h2>

<img class="screencap" src="https://poppyvine.com/wp-content/uploads/2019/04/beach.jpg">

</body>
</html>

Все внутри смешанного элемента будет смешано, поэтому они должны быть братьями и сестрами.

1 голос
/ 08 апреля 2019

Как я уже объяснил в этом предыдущем ответе , изоляция не будет работать таким образом, и вы не можете изолировать контент после применения mix-blend-mode

По идее исправление должно учитывать background-blend-mode с несколькими фонами.Это повлияет только на фон, а не на контент, и у вас будет уменьшенный код. 

.bkg-image {
  background: 
    linear-gradient(#323ff0,#323ff0) center/100% calc(100% - 100px) no-repeat,
    url(https://poppyvine.com/wp-content/uploads/2019/04/beach-bw.jpg) center/cover;
  text-align: center;
  background-blend-mode: multiply;
  padding: 100px 0px;
}

.bkg-image .content {
  color: #fff;
}
<div class="bkg-image">
    <div class="content">
      <h1>Margins to show bkg img<br>&<br>Content unaffected by blend mode</h1>
    </div>
</div>

Еще один связанный с этим вопрос: Изоляция с помощью CSS Mix-Blend-Modes: как предотвратить смешивание элементов с родителем

Решение с использованием псевдоэлемента: Смешать режим смешивания, умножить при сохранении непрозрачности текста?

...