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

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

0 голосов
/ 30 декабря 2018

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

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

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

А это картинка, если вы не хотите открывать ссылку: enter image description here

1 Ответ

0 голосов
/ 30 декабря 2018

Эффект, который вы ищете, возможен при повторном использовании одного и того же изображения, увеличенного в несколько раз (~ 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://106c4.wpc.azureedge.net/80106C4/Gallery-Prod/cdn/2015-02-24/prod20161101-microsoft-windowsazure-gallery/sbsoft.poweraddon-marketing-cloud.1.0.1/Icon/large.png">
    <img class="blur" src="https://106c4.wpc.azureedge.net/80106C4/Gallery-Prod/cdn/2015-02-24/prod20161101-microsoft-windowsazure-gallery/sbsoft.poweraddon-marketing-cloud.1.0.1/Icon/large.png">
  </div>
</div>
<div class="card">
  <div class="top-bar">
    <img src="https://106c4.wpc.azureedge.net/80106C4/Gallery-Prod/cdn/2015-02-24/prod20161101-microsoft-windowsazure-gallery/intershop.50cca231-26fa-4e4f-a8e6-b73522817243.1.0.5/Icon/large.png">
    <img class="blur" src="https://106c4.wpc.azureedge.net/80106C4/Gallery-Prod/cdn/2015-02-24/prod20161101-microsoft-windowsazure-gallery/intershop.50cca231-26fa-4e4f-a8e6-b73522817243.1.0.5/Icon/large.png">
  </div>
</div>

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

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

...