如何在不知道图像网址的情况下将叠加层添加到现有背景图像？

Question

与How do I overlay a gradient background over an existing background with CSS?以及How do I combine a background-image and CSS3 gradient on the same element?类似的问题，但在这种情况下，我不可以控制背景图片网址。

案例

作为改善我的Facebook体验的一些风格的一部分，我写了这篇CSS：

.jewelCount > span { /* replaces notification color with a more neutral tone of red */
    background-color: #ab5151;
}
.jewelButton > div { /* adds a faint overlay on top of notification icons to achieve a more neutral shade of white */
    background-image: linear-gradient(rgba(66, 103, 178, 0.1), rgba(66, 103, 178, 0.1)), url(/rsrc.php/v3/yc/r/rZKhvPo9Lsv.png) !important;
}

（使用Stylish extension for Firefox）。

它有效，

但与此同时，背景图片网址已从/rsrc.php/v3/yc/r/rZKhvPo9Lsv.png更改为/rsrc.php/v3/y1/r/vZXeFuzjfGs.png，我不得不手动更新我的样式，这很糟糕。

由于我根本没有更改背景图片url()（我只是在background-image属性中重复使用它来实现叠加效果），有没有办法“预先” linear-gradient函数对于该元素已经使用的background-image是什么？

如果在CSS中不可能（而且我猜它不是），我会解决使用javascript与Greasemonkey一起使用的解决方案（尽管没有jQuery）。

感谢。

Answer 1

你只能用CSS获得你想要的东西。

您有两种替代方法可以获得相同的效果：

插入阴影

您可以使用颜色

设置插入阴影

div {
    width: 100px;
    height: 100px;
    background: linear-gradient(yellow, white);
    box-shadow: inset 0px 0px 0px 1000px rgba(0,0,255,0.4);
}

<div></div>

伪元素

您可以使用所需的颜色在div上设置伪元素。 （你需要将div放在相对位置以获得伪位置）

div {
    width: 100px;
    height: 100px;
    background: linear-gradient(yellow, white);
    position: relative;
}

div:after {
    content: "";
    width: inherit;
    height: inherit;
    position: absolute;
    left: 0;
    top: 0;
    
    background: rgba(0,0,255,0.2);
}

<div></div>

Answer 2

目前我用一个用户脚本解决了这个问题。

// ==UserScript==
// @name     Facebook notification icon color
// @version  1
// @match    https://www.facebook.com/*
// @run-at   document-start
// @grant    none
// ==/UserScript==

(function start(){
    var jewels = document.querySelectorAll('.jewelButton');
    if(!jewels[0]) {
      setTimeout(start, 50);
      return;
    }
    jewels.forEach(function(elem) {
      var url = window.getComputedStyle(elem.firstChild).getPropertyValue('background-image');
      elem.firstChild.style.setProperty('background-image', 'linear-gradient(rgba(66, 103, 178, 0.1), rgba(66, 103, 178, 0.1)), ' + url, 'important');
    });

})();