Как добавить оверлей к существующему фоновому изображению, не зная URL изображения?

Question

Подобный вопрос к Как мне наложить градиентный фон поверх существующего фона с помощью CSS? и, конечно, Как мне объединить фоновое изображение и CSS3 градиент для одного и того же элемента? , но в этом случае я не имею контроль над URL-адресом фонового изображения.

Показательный пример

В рамках некоторых стилей, которые я применял для улучшения своего 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;
}

(используя Стильное расширение для Firefox ).

и все работает,

, но в то же время URL фонового изображения изменился с /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.

У вас есть 2 альтернативных способа получить один и тот же эффект:

врезка тени

Вы можете установить тень для вставки с цветом

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');
    });

})();