时间戳

首页 > 解决方案 > 如何在基于背景的焦点轮廓上使用混合混合模式？

html - 如何在基于背景的焦点轮廓上使用混合混合模式？

问题描述

mix-blend-mode当背景与焦点轮廓颜色相同时，我正在尝试使用更改焦点轮廓。我很难把它们放在一起。

当背景是蓝色时，焦点轮廓应该是白色的，就是这样。但是，当背景为白色时，我希望焦点轮廓为蓝色，但事实并非如此。

document.querySelectorAll("a:not(a[href])").forEach((element) => {
  element.setAttribute("href", "#");
});
body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: blue;
}

h4 {
  font-size: 24px;
}

a {
  text-decoration: none;
  color: white;
}

.button {
  background: grey;
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.button::after {
  outline: 1px solid white;
  mix-blend-mode: difference;
}

button:focus-visible,
a:focus-visible,
a:focus-visible::after,
input[type=checkbox]:focus-visible,
input[type=radio]:focus-visible,
input[type=submit] {
  outline: 2px solid white;
  outline-offset: 4px;
  mix-blend-mode: difference;
}
<div class="container">
  <a class="button">a button</a>
  <h4><a href="#">Inline text element</a></h4>
</div>

标签： htmlcss

解决方案

对于您的问题，需要在父元素上使用css属性。isolation: isolate在这种情况下，我们创建一个新的堆叠上下文并应用mix-blend-mode。关于隔离

document.querySelector('.button').addEventListener('click', ev => {
  const body = ev.target.closest('body');
  body.classList.toggle('reverse');
});
document.querySelectorAll('a:not(a[href])').forEach(element => {
  element.setAttribute('href', '#');
});
:root {
  --primary-clr: white;
  --secondary-clr: blue;
}

.reverse {
  --primary-clr: blue;
  --secondary-clr: white;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--secondary-clr);
  isolation: isolate;
}

h4 {
  font-size: 24px;
}

a {
  text-decoration: none;
  color: var(--primary-clr);
}

.button {
  background: grey;
  color: var(--primary-clr);
  padding: 1rem 1.5rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.button::after {
  outline: 1px solid var(--primary-clr);
  mix-blend-mode: difference;
}

button:focus-visible,
a:focus-visible,
a:focus-visible::after,
input[type='checkbox']:focus-visible,
input[type='radio']:focus-visible,
input[type='submit'] {
  outline: 2px solid var(--primary-clr);
  outline-offset: 4px;
  mix-blend-mode: difference;
}
<div class="container">
  <a class="button">click to change</a>
  <h4><a href="#">Inline text element</a></h4>
</div>

推荐阅读