CSS - изменение цвета фона Div в зависимости от цвета изображения внутри того же Div

Я хочу изменить цвет фона div при наведении на него курсора в зависимости от значка внутри того же div.

Кто-нибудь знает, что использовать (CSS, Bootstrap ...), чтобы сделать это простым способом и как?

Это пример ссылки: https://appsource.microsoft.com/en-us/marketplace/apps

А это картинка, если вы не хотите открывать ссылку: CSS - изменение цвета фона Div в зависимости от цвета изображения внутри того же Div

css sass bootstrap-4 less

30.12.2018 17:14

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

1 518

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Эффект, который вы ищете, возможен путем повторного использования одного и того же изображения, увеличенного в несколько раз (~ 10), перекрытого с position:absolute с огромным коэффициентом размытия, при обрезке его переполнения:

.card { 
  height: 250px;
  width: 150px;
  margin: 1rem;
  display: inline-block;
  border: 1px solid #eee;
  border-radius: 6px;
}
.top-bar {
  padding: 1rem;
  position: relative;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}
.top-bar img {
  width: 36px;
  z-index: 1;
  position: relative;
}
.top-bar img.blur {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 512px;
  filter: blur(51.2px);
  opacity: .07;
}
.card:hover img.blur {
  opacity: .42;
}

<div class = "card">
  <div class = "top-bar">
    <img src = "https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68">
    <img class = "blur" src = "https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68">
  </div>
</div>
<div class = "card">
  <div class = "top-bar">
    <img src = "https://i.picsum.photos/id/102/4320/3240.jpg?hmac=ico2KysoswVG8E8r550V_afIWN963F6ygTVrqHeHeRc">
    <img class = "blur" src = "https://i.picsum.photos/id/102/4320/3240.jpg?hmac=ico2KysoswVG8E8r550V_afIWN963F6ygTVrqHeHeRc">
  </div>
</div>
<div class = "card">
  <div class = "top-bar">
    <img src = "https://i.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0">
    <img class = "blur" src = "https://i.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0">
  </div>
</div>

Вы можете еще больше улучшить это, добавив JS, который просто копирует <img> на лету и применяет к нему класс .blur (так что вам не нужно вручную добавлять два изображения на каждую карту).

Обратите внимание, что css-фильтры еще не имеют полного поддержка браузера.
В связанном вами примере размытие выполняется с использованием SVG <filter> (немного лучше поддержка браузера) и <feGaussianBlur>, но принцип тот же.

Спасибо Андрей, это именно то, что мне нужно.

— 01.01.2019 12:20

30.12.2018 18:15