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

Question

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

1

Аналогичный вопрос: Как наложить фон градиента на существующий фон с помощью 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).

Благодарю.

Marc.2377 10 июнь 2018, в 03:35

Источник

0

Посмотрите, решают ли ваши проблемы режимы наложения CSS. w3schools.com/cssref/pr_background-blend-mode.asp
Pankaj Phartiyal 10 июнь 2018, в 04:14

Теги:

javascript

css

css3

2 ответа

0

Пока я решил это с помощью пользовательского скрипта.

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

})();

Marc.2377 10 июнь 2018, в 03:21

Ещё вопросы

Посмотрите, решают ли ваши проблемы режимы наложения CSS. w3schools.com/cssref/pr_background-blend-mode.asp

vals · Accepted Answer · 2018-06-10T08-23-00.000Z

Вы не можете получить то, что хотите только с помощью 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, чтобы получить псевдо-позицию ok)

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>

Приятно. Хотя это не совсем то, что задал мой вопрос, я принимаю это, потому что вы ясно даете понять, что это невозможно. Я пошел с вашим первым решением, но объявил 4 значения длины для box-shadow (например, 0 0 0 50px ) для достижения резкого наложения. Благодарю.
Рад, что это помогло. К сожалению, нет способа сохранить часть свойства и переопределить другую часть в чистом CSS