правило нескольких фильтров не применяется? - PullRequest
Новая
       16

правило нескольких фильтров не применяется?

0 голосов
/ 27 октября 2018

Я пытаюсь использовать несколько фильтров на фоновом изображении 

body {
  background-image: url('https://picsum.photos/200/300?image=0');
  filter: grayscale(50%) blur(3px) brightness(10%);
}

он игнорирует правило, которое я ввел ... не могу даже сделать 1 за один раз ... я не могу использовать фильтры на фоновых изображениях?

Ответы [ 2 ]

0 голосов
/ 27 октября 2018

Фильтр работает нормально, но фоновое изображение больше не находится внутри тела. Здесь вы сталкиваетесь с особым фоновым поведением , которое распространяет значение фона от тела к холсту и удаляет его из тела. Другими словами, ваш фон перемещается на верхний элемент, а фильтр остается на теле.

Чтобы заметить это, просто примените фон к элементу html, и вы отключите эффект распространения, таким образом, фильтр будет работать как положено: 

body {
  background-image: url('https://picsum.photos/200/300?image=0');
  filter: grayscale(50%) blur(3px) brightness(10%);
  height:200px; /*you need a height to see the image !*/
}
html {
 background:red;
}

Между прочим, нецелесообразно применять фильтр ко всему телу, поскольку это также повлияет на содержимое. Если вы хотите отфильтровать только изображение, лучше рассмотрите псевдоэлемент, который будет вашим фоновым слоем и к которому вы можете применить фильтр, не затрагивая содержимое: 

body {
  position:relative;
  z-index:0;
  height:200px; /*you need a height to see the image !*/
}
body:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: url('https://picsum.photos/200/300?image=0');
  filter: grayscale(50%) blur(3px) brightness(10%);
}
0 голосов
/ 27 октября 2018

Вы можете использовать filter свойство на background-image 

body {
  height: 100vh;
  padding: 0;
  display: grid;
  align-content: center;
  justify-content: center;
}
.module {
  width: 300px;
  height: 300px;
  display: grid;
  place-items: center;
  color: #ff43ea;
  position: relative;
}
.module::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(https://images.unsplash.com/photo-1494645009625-cc17363a5f20?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=bd502af39c922553e5a13624d4f44f40);
  background-size: cover;
  filter: grayscale(100%);
}
.module-inside {
  position: relative;
  font: bold 42px sans-serif;
}
<div class="module">
  <div class="module-inside">
    Module
  </div>
</div>
...