CSS Greyscale Masking

Question

Мне интересно, можно ли было бы частично замаскировать объект в CSS с помощью шкалы серого.Я мог бы сделать это с изображениями, хотя было бы довольно сложно сделать изображение для 10% серого, 11% серого и т. Д.

по умолчанию слева, справа 90% серого:

Пример того, что я собираюсь сделать (это будет представлять 50% оттенков серого):

Answer 1

Сделать фон из двух делений, левого и правого, и для левого набора делений:

background-color: grey;background-blend-mode: multiply;

Answer 2

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

#container {
  width:250px;
  height: 250px;
  overflow: hidden;
}

#right, #left {
  max-width: 50%;
  display: inline-block;
  float:right
}

#right img {
 position: relative;
 left: -100%;
}
#left {
    filter: grayscale(100%);
    float: left;
    overflow: hidden;
}

<div id="container">
    <div id="right">
        <img src="https://i.stack.imgur.com/08h6Q.png"/>
    </div>
    <div id="left">
        <img src="https://i.stack.imgur.com/08h6Q.png"/>
    </div>
</div>

Вы можете делать то же самое с объектами, просто помещая их в контейнеры, устанавливая ширину каждого контейнера независимо от того, какую часть вы хотите показать, скрывая остальные.