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

我一直在努力使这个属性发挥作用，这样我就不必求助于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项目是特定ul中的li项目。背景只是一个坚实的灰色块，不使用屏幕混合模式。有什么智慧可以被抛弃吗？

根据：

混合模式的定义顺序应与

背景图像

CSS属性的定义顺序相同

---

但您没有指定

背景图像

<代码>背景混合模式不混合颜色，它混合图像。

混合模式可用于两种不同的属性

• 背景混合模式
• 混合模式

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

---

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

等等，为什么这样的东西不起作用呢：body{background image:url（“../assets/images/bgart.jpg”）；background blend mode:screen；}提供一个示例。你预计会发生什么？你怎么能只混合一件事呢？嗯，我想我尝试做的可能根本不可能，但我已经将我的页面设置为以单个图像作为背景，我希望任何其他元素的背景颜色（在本例中是li的）都有一个混合模式。下面是我正在寻找的效果片段（我使用PS创建，因为我无法使用CSS）：较亮的区域是由#1e组成的屏幕混合层。我希望这些是html中元素的混合背景色。基本上增加了不透明度，但在某种程度上保持了强度，而不是变得更暗和更难看到。如果你正在寻找这样的东西：尝试Chrome和FF