问题标签 [mix-blend-mode]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

146 问题

0 投票

1 回答

2432 浏览

performance - 混合模式滚动滞后问题

只是在文本元素上使用'mix-blend-mode：overlay'，它会导致我的浏览器在文本位于屏幕视图中时滚动非常慢。一旦您滚动过文本项，滚动就会恢复为黄油般光滑。

如果我删除混合混合模式，则会解决影响 chrome 和 firefox 的滞后效应。

有没有其他人对混合混合模式有类似的问题？

2015-11-19T04:35:03.200

0 投票

1 回答

149 浏览

css - 混合两层文本

我正在尝试将两层文本混合在一起，两层都是白色的，但是在两个单词相互重叠的部分，我希望单词与背景具有相同的颜色。

我已经开始玩混合混合模式了。

它只需要在浏览器的最新版本中工作（没关系，ie）

http://codepen.io/SusanneLundblad/pen/bEopPw?editors=110

如果有人有任何建议，我会非常高兴！

css stylus mix-blend-mode

2016-01-15T13:46:19.710

0 投票

0 回答

477 浏览

css - 为什么修复背景以避免滚动会破坏混合混合模式 css 效果？仅限 Chrome

我在玩的时候发现了一些奇怪的东西mix-blend-mode。当我修复背景图像时，mix-blend-mode效果不起作用。这发生在 Chrome 中。但在 Firefox 中它工作正常。这很糟糕，因为我经常使用视差。知道为什么会发生这种情况或如何解决它，以便我可以修复背景并仍然使用mix-blend-mode？

psfixed从这里删除 -->background: url(http://unsplash.it/3200/1600?image=973) no-repeat no-repeat center center fixed;你会看到它工作正常。除了，背景随着滚动移动:(

这是一个例子：

CSS：

这就是我所看到的：

你可以使用这个CODEPEN

css mix-blend-mode

2016-01-31T14:57:22.677

0 投票

1 回答

7358 浏览

html - 如何使用混合混合模式操作文本颜色

我正在尝试mix-blend-mode在 CSS 中操作文本颜色。我在图像顶部有一些内容，文本的颜色是白色，我的图像是白色的。当文本位于形状顶部时，我想混合文本。

我已经尝试了一些测试，我得到了我想要的结果，如果我将应用mix-blend-mode在身体上，而不是在元素上。我不能使用mix-blend-modeon body，有没有办法获得相同的结果，但不使用mix-blend-modeon body？

CSS：

请在此处查看Codepen或此处的JSFiddle，您将看到我想要的结果。

PS：当文本位于白色形状的顶部时，我需要给文本一个不同的颜色（例如蓝色）。

html css mix-blend-mode

2016-02-20T20:09:55.097

0 投票

3 回答

14350 浏览

css - CSS中的乘法模式？

在 Photoshop 中，如果您将具有白色背景的 JPG 图像导入到具有蓝色的文档中background，您可以background通过将图像设置为“正片叠底”模式来使图像的白色消失。

我可以单独使用 CSS 做同样的事情吗？

css background-blend-mode mix-blend-mode

2016-03-11T15:19:42.267

0 投票

2 回答

48 浏览

css - 它是哪个css属性？

我认为，如果该属性设置为浅色并且无法读取文本，则该属性会在浅色背景上生成深色文本颜色......或者如果它在图像上，则反转文本颜色和/或反之亦然。

我已经看到了一些关于 SO 的问题，但真的找不到它们了，也不记得属性名称了。如果我不清楚：

如果将文本颜色设置为白色，我们无法读取它，因为 python 徽标周围有一些空白区域并且文本在图像上方。有一个 css 属性可以将文本设置为现在的黑色。它叫什么名字？

css colors css-filters mix-blend-mode

user2917245

2016-03-30T10:53:28.810

0 投票

1 回答

2050 浏览

css - CSS与堆叠上下文之外的对象混合？

我正在使用 CMS 在我的页面顶部构建一个“英雄区域”。它有一个背景图像、一些文本和几个按钮链接。我希望我的按钮mix-blend-mode:multiply带有背景图像。

我的问题是默认的 CMS CSS 将按钮放在与背景图像不同的堆叠上下文中，因此它们不会混合。具体来说，问题在于.inner该类具有position:relative和z-index:1。如果我覆盖 CSS 以将它们放在相同的上下文中position: static，那么整个部分的布局就会中断。

是否有任何解决方法可以在不带走的情况下button与之融合？.outerposition:relative.inner

css blending mix-blend-mode

2016-05-07T17:37:06.670

0 投票

1 回答

939 浏览