标签: background-blend-mode
CSS灰度滤镜和背景混合模式同时？
我试图像在photoshop文件中一样对待图像 - 将图像去饱和为灰度,然后应用具有多重混合模式的颜色叠加.为此,我正在使用...设计CSS背景图像.
.someclass
{
/* grayscale */
-webkit-filter: grayscale(1);
filter: gray;
filter: grayscale(1);
filter: url(desaturate.svg#greyscale);
/* multiply */
background-color: rgba(190, 50, 50, 0.65);
background-blend-mode: multiply;
}
这个问题是灰度滤波器最终使混合模式的饱和度变为饱和度.换句话说,乘法首先发生,然后发生灰度.如何切换它以便首先应用灰度,然后再应用混合模式？
我为代码创建了一个小提琴(http://jsfiddle.net/g54LcoL1/1/)和一个我希望小提琴结果看起来像的截图(用Photoshop制作).最底部的图像div.grayscale.multiply应该是红色的.
推荐指数
解决办法
查看次数
从子元素中删除mix-blend-mode
如何在元素上设置mix-blend-mode,但不是它的子元素？将子项设置为默认值normal似乎不起作用:
推荐指数
解决办法
查看次数
第3页上的3D转换破坏了混合混合模式
我在摆弄这个mix-blend-mode财产。一切正常，直到我transform: perspective(100px)在页面上的任何地方添加类似或任何其他3d转换之类的东西，然后完全中断。应用了转换，但是混合模式消失了。
我在chrome和firefox以及linux和Windows上进行了测试，并且到处都是相同的，但是在另一台计算机上它运行良好（我不记得它拥有并正在运行ubuntu的chrome版本）。
那是可以用CSS修复的东西，还是仅仅是硬件/ GPU驱动程序问题？
我放入background-blend-mode标签是因为该mix-blend-mode标签尚不存在，但是奇怪的是此属性工作得很好，并且不会被转换破坏。
这是我要实现的代码库：http ://codepen.io/vnenkpet/pen/avWvRg
闪电不应带有闪烁的黑色背景，而应与页面背景平滑融合。
编辑：
我刚刚发现它实际上可以在Firefox中运行。因此，这是一个chrome bug吗？据我所知，3D变形不应破坏混合模式...
推荐指数
解决办法
查看次数
带有渐变和图像的背景混合模式
目前我无法将 PNG 图像与 CSS 渲染的渐变混合。代码如下所示：
background: linear-gradient(to right, red , blue), url(img/water.png);
background-blend-mode: overlay;
使用渐变时不应用混合模式（以及支持背景混合模式的最新 Chrome Canary Build）。然而，当使用纯颜色作为背景时，它会被应用，例如rgb(38, 38, 219) url(img/water.png)
这是 CSS 背景混合模式规范的限制还是我做错了什么？
我想要做的就是将 PNG 覆盖在渐变上，创建一种我无法实现的效果，例如让 PNG 具有较小的不透明度或开始对 PNG 进行着色。
推荐指数
解决办法
查看次数
Edge/IE中是否不支持background-blend-mode
我很好奇为什么这在MS Edge/IE浏览器中不起作用.混合模式属性在那里不可用吗？我无法挖掘任何有关它的信息.
.blended {
background-image: url(image.png);
background-color: red;
background-blend-mode: multiply;
}
推荐指数
解决办法
查看次数
为什么 CSS 混合模式在应用于文档正文时不起作用？
以下是针对指定“背景”元素工作的 CSS 混合模式示例：
body {
position: relative;
}
.background {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 100%;
background: linear-gradient(red, blue);
}
.blend {
background: green;
mix-blend-mode: difference;
}<body>
<div class="background"></div>
<div class="blend">BLEND ME</div>
</body>这是不应用于 的混合模式示例body：
body {
background-image: linear-gradient(red, blue);
background-size: 100%;
background-repeat: no-repeat;
}
.blend {
background: green;
mix-blend-mode: difference;
}<body>
<div class="blend">BLEND ME</div>
</body>是什么赋予了？body计算 CSS 混合模式时是否不考虑元素？这是否适用于所有浏览器？我是谁，我为什么在这里？在尝试实现动态（通过滚动）body与background-attachment: fixed.
更新：这似乎只适用于 Chrome；Firefox/Safari 的行为符合预期 - Chrome …
推荐指数
解决办法
查看次数
使用混合混合模式和背景混合模式时结果不同
我注意到，即使您使用相同的混合模式，使用mix-blend-mode结果也不同于使用结果background-blend-mode。
例如，比较下面的2个结果：
我已经在下面的设置和JSFiddles中复制了：
的HTML
<div class="background">
<div class="overlay"></div>
</div>
的CSS
.background{
width:200px;
height:200px;
//background-color:green; //toggle depending on what you want to use
background-blend-mode:soft-light;
background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
background-size:cover;
}
.overlay{
width:100%;
height:100%;
background-color:green; //toggle depending on what you want to use
mix-blend-mode:soft-light;
}
JSFiddle
使用混合混合模式：https : //jsfiddle.net/p8gkna87/
使用background-blend-mode：https : //jsfiddle.net/p8gkna87/1/
一些背景资料
我目前正在复制使用柔光混合模式的Photoshop设计，同时还使用51％的不透明度。因此它将无法使用，background-blend-mode因为不透明度不能应用于同一对象。
推荐指数
解决办法
查看次数
CSS中的乘法模式？
在Photoshop中，如果将带有白色背景的JPG图像导入带有蓝色的文档中background，则可以background通过将图像设置为“倍增”模式来使图像的白色消失。
我可以单独使用CSS做完全相同的事情吗？
推荐指数
解决办法
查看次数
两个元素上的 CSS 背景混合模式
假设我有一个div，并应用了渐变作为背景属性。我现在想要覆盖一个黑色 PNG（较小尺寸）并将 PNG 设置为具有覆盖的背景混合模式。不幸的是我不知道如何实现这一目标。
我知道当我使用 PNG 图像将渐变渲染到 Div 的 CSS 中时，我可以有一个工作背景混合模式，如下所示：
background: url(../img/plus.png), linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
background-blend-mode: overlay;
然而，这会导致渐变与实际 PNG 一样小，这不是理想的效果，如下所示：
我想用纯 CSS 实现这一点（如果可能的话）：
这里有一个 Codepen 来说明我想要做什么：http://codepen.io/anon/pen/zxOXGP 注意黑色图标。我想覆盖这个。
推荐指数
解决办法
查看次数
具有不透明度和过渡的动画混合模式
我正在寻找一种改变background-color-blend-mode像Photoshop 这样的不透明度的方法。我的目标是为混合模式的不透明度设置动画，使其消失。有任何想法吗 ？
#img-esadvalence {
background-image: url(http://leodurand.fr/works/planesad/esad1.jpg);
background-color: #e12a1c;
background-blend-mode: screen;
}
.all-img-menu {
background-size: contain;
background-position: center;
width: 110%;
padding-bottom: 40.75vh;
display: block;
top: 50%;
-ms-transform: translate(0%,-50%);
-webkit-transform: translate(0%,-50%);
transform: translate(0%,-50%);
position: absolute;
transition: all 0.6s ease;
}<div id="img-esadvalence" class="all-img-menu"></div>推荐指数
解决办法
查看次数
CSS:iPhone Safari的后台混合模式后备
我在我的标题上可疑地使用了背景混合模式:https://yogrow.co/ecommerce-stack
但是我注意到背景混合模式在iPhone上不起作用.我没有背景颜色.
这是我正在使用的CSS
background-repeat: repeat;
background-image: url("assets/img/swirl_pattern.png");
background-color: #E33551;
background-blend-mode: multiply;
是使用媒体查询创建一组新的css规则的唯一/最佳选择,还是有另一种方法可以进行后备,因此对于像iPhone Safari这样没有显示颜色的设备,背景变为红色.
因为我在背景上有白色文字,所以目前看起来在iPhone游戏中难以辨认.
谢谢
推荐指数
解决办法
查看次数