TransWikia.com

css: фильтры для заднего фона

Stack Overflow на русском Asked on February 21, 2021

Не подскажете, есть ли в css фильтры для background, особенно интересен hue

хочу при наведении мышки на блок менять иконку-задний фон, но не хочу ее перерисовывать в том же фотошопе и вставлять в div:hover {background: ...}

было бы идеально, если бы цветность можно было бы изменить с помощью фильтра, что-то типа такого:

div:hover {
    background-image: ...;
    background-filter: hue(...);
}

P.S.

иконка-пиктограмка одноцветная и для нее легко изменить просто цветность например на голубую

backgroundbackground imagecsscss filterscss3

One Answer

Можно использовать filter

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

:root {
  --transition-timing-function: ease;
  --transition-duration: 0.4s;
}

.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  gap: 5px;
}

.white-block {
  --size: 30px;
  width: var(--size);
  height: var(--size);
  background-color: white;
}

.image {
  --size: 100px;
  width: var(--size);
  height: var(--size);
  --background-image: url(https://picsum.photos/200);
  position: relative;
  cursor: pointer;
  z-index: 1;
}

.image::before, .image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  
  transition-timing-function: var(--transition-timing-function);
  transition-duration: var(--transition-duration);
  transition-property: filter, background-color;
}

.image::before {
  z-index: -2;
  background: var(--background-image) no-repeat center;
  background-size: cover;
  filter: none;
}

.image.filter1:hover::before {
  filter: hue-rotate(180deg);
}

.image.filter2:hover::before {
  filter: contrast(175%);
}

.image.filter3:hover::before {
  filter: invert(75%);
}

.image.filter4:hover::before {
  filter: brightness(50%);
}

.image.filter5:hover::after {
  background-color: rgba(255, 0, 0, 0.3);
}

.image.filter6:hover::after {
  background-color: rgba(118, 255, 0, 0.3);
}

.image.filter7:hover::after {
  background-color: rgba(255, 191, 0, 0.3);
}
<div class="image flex filter1">
  привет
  <div class="white-block">
  </div>
</div>

<div class="image flex filter2">
  привет
  <div class="white-block">
  </div>
</div>

<div class="image flex filter3">
  привет
  <div class="white-block">
  </div>
</div>

<div class="image flex filter4">
  привет
  <div class="white-block">
  </div>
</div>

<div class="image flex filter5">
  привет
  <div class="white-block">
  </div>
</div>

<div class="image flex filter6">
  привет
  <div class="white-block">
  </div>
</div>

<div class="image flex filter7">
  привет
  <div class="white-block">
  </div>
</div>

В красный цвет:

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.image {
  --size: 100px;
  width: var(--size);
  height: var(--size);
  background: url(https://picsum.photos/200) no-repeat center;
  background-size: cover;
  position: relative;
  z-index: 1;
}

.image::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0);
  transition: background-color 0.2s ease;
}

.image:hover::before {
  background-color: rgba(255, 0, 0, 0.3);
}
<div class="image">

</div>

Answered by Михаил Камахин on February 21, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP