将CSS混合混合模式与位置固定元素的子代一起使用 [英] Using css mix-blend-mode with a child of a position fixed element
问题描述
我想在 position：fixed 元素内设置锚的混合混合模式，但不应用。
如果我将混合混合模式应用于其父元素，或者将父元素设置为 position：absolute ，它也可以工作，但是这两个都不起作用是我想要实现的目标。
使用三个示例的Codepen，我希望#nav看起来像＃nav2和＃nav3并带有现有的html。
，所有这些方式均会造成此问题：
- 具有
位置值绝对或相对和z-index的值不是auto。
- 带有
位置值固定或粘性（适用于所有移动浏览器，但不适用于较旧的台式机）。
- 元素是flex的子元素（
flexbox）容器，并带有z-index值，而不是auto。
- 是网格的子元素的元素（
网格）容器，并带有z-index值（auto 。
- 具有
不透明度的值小于1（请参阅不透明度规范）。
- 带有
mix-blend-modenormal以外的值。
- 具有以下任意一个属性的元素，其值<< c $ c> none除外：
- 带有
隔离值隔离。
- 带有
-webkit-overflow-scrolling值touch。
- 带有
将更改的值，该值指定将在非初始值上创建堆栈上下文的任何属性（请参见这篇文章）。
- 带有
包含值layout或paint或包含以下任意一个的复合值他们（即包含：严格，包含：内容）。
您可以解决以下限制：
- 找到一种方法
- 将有问题的样式/位置应用于子级而不是父级；将父级定位/设置样式不会导致新的堆叠上下文。也就是说，使用
fixed定位各个孩子。 - 应用
mix-blend-mode到创建新堆叠上下文的父级，而不是该堆叠上下文的子级。 - 将背景图像应用于已创建新堆叠上下文并调整大小/位置的父级使其与现有背景图像对齐。
I would like to set the mix blend mode of an anchor inside of a position:fixed element but it is not applied.
If I apply the mix blend mode to the parent element it works or if I set the parent element to position:absolute it also works but neither of these are what I'm wanting to achieve.
Codepen with the three examples, I'd like #nav to look like #nav2 and #nav3 with the existing html.
http://codepen.io/wesdeboer/pen/QjawYv
HTML
<body>
<div id="nav">
<a href="">fixed</a>
</div>
<div id="nav2">
<a href="">absolute</a>
</div>
<div id="nav3">
<a href="">parent</a>
</div>
</body>
CSS
body { background: url(http://lorempixel.com/400/200)}
#nav {
position: fixed;
top:0;
left: 0;
}
#nav2 {
position: absolute;
top:0;
left: 100px;
}
#nav3 {
position: fixed;
top: 0;
left: 250px;
mix-blend-mode: difference;
}
a {
color: white;
font-weight: bold;
font-size: 32px;
mix-blend-mode: difference;
}
Tested in Chrome 45
The reason position: fixed; on a parent element prevents mix-blend-mode from behaving as you expect is that position: fixed; creates a new stacking context, isolating the child element from the rest of the document.
I verified that this is indeed the issue by forking your example and creating a new nav item which creates a new stacking context in a different way: by positioning it absolutely and setting z-index. This new stacking context prevents the child element from blending with the background image outside the stacking context, just as we observed with the position: fixed; element.
position: fixed; and position: absolute; z-index: 3; are just two of many ways to create a new stacking context, all of which should create this issue:
- Element with a
positionvalueabsoluteorrelativeandz-indexvalue other thanauto.- Element with a
positionvaluefixedorsticky(sticky for all mobile browsers, but not older desktop).- Element that is a child of a flex (
flexbox) container, withz-indexvalue other thanauto.- Element that is a child of a grid (
grid) container, withz-indexvalue other thanauto.- Element with a
opacityvalue less than1(See the specification for opacity).- Element with a
mix-blend-modevalue other thannormal.- Element with any of the following properties with value other than
none:- Element with a
isolationvalueisolate.- Element with a
-webkit-overflow-scrollingvaluetouch.- Element with a
will-changevalue specifying any property that would create a stacking context on non-initial value (see this post).- Element with a
containvalue oflayout, orpaint, or a composite value that includes either of them (i.e.contain: strict,contain: content).
Your options for getting around this limitation include:
- Finding a way to position / style the parent that doesn't result in a new stacking context.
- Applying the problematic styling / positioning to the children instead of the parent; ie, positioning the individual children using
fixed. - Applying
mix-blend-modeto the parent that has created the new stacking context rather than a child of that stacking context. - Applying the background image to the parent that has created the new stacking context and sizing / positioning it to align with the existing background image.
这篇关于将CSS混合混合模式与位置固定元素的子代一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
