Question

我一直在尝试让这个属性工作，所以我不必诉诸于Photoshop来利用屏幕和乘法等功能。我到处都看到它的引用，但我似乎无法在我正在处理的页面上工作。

也许我执行错了？

.nav-items {
display: inline-block;
font-family: Porter;
font-size: 2em;
letter-spacing: .05em;
margin: .3em;
padding: 5px;
background-color: #1e1e1e;
background-blend-mode: screen; }

其中的nav-items是特定的ul。背景只是一个不使用屏幕混合模式的纯灰色块。有什么智慧可以摆脱？

Answer 1

根据documentation：

混合模式的定义方式与ng-repeat="gem in filteredGems=(gemList | status:3)" {{filteredGems.length}} CSS属性
的顺序相同

但您没有指定background-image。 background-image不会混合颜色，它会混合图像。

Answer 2

混合模式可以用于2个不同的属性，

背景 - 共混 - 模式
混合 - 混合模式

第一个设置同一元素中两个背景之间的效果（可以是图像和纯色）

第二个设置元素和底层元素之间的效果（这似乎是你的情况）。但请注意，它会影响所有元素，（边框，文本等） - 不仅仅是背景

CSS是背景模式混合不是一件事吗？

2 个答案: