12

То есть как сделать половину (левую сторону) чёрно-белой, а вторую половину (правую сторону) цветной.

Я хочу использовать это для показа прогресса заполнения от 0% до 100%.

img
{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
<img src="http://pngimg.com/upload/assault_rifle_PNG1427.png" />

1
  • Старый способ - две версии картинки и ограниченная область отображения одной поверх другой.
    – DimXenon
    28 июл 2016 в 15:03

4 ответа 4

12

Вариант с помощью градиента и background-blend-mode: luminosity;. Не работает в IE, Edge и Safari. (Спасибо VenZell за замечание.)

https://jsfiddle.net/glebkema/rrnubzah/

.progress {
  background-image: url(http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg), linear-gradient(90deg, #666 50%, transparent 50%);
  background-blend-mode: luminosity;
  height: 400px;
  width:  400px;
}
<div class="progress"></div>

4
  • 1
    Стоило бы отметить, что это не поддерживается в IE, Edge и Safari. А лучше дать ссылку на caniuse.com/#search=background-blend-mode. Плюсик все равно ваш.
    – VenZell
    28 июл 2016 в 8:47
  • @VenZell Спасибо за замечание. Добавил в ответ предупреждение и ссылку. 28 июл 2016 в 15:03
  • Поправьте тогда еще и синтаксис градиента — префиксы уже не нужны нигде, если нет желания поддерживать 15-й фаерфокс, 25-й хром и 11-ю Оперу. 14 фев 2017 в 16:39
  • 1
    @SashaOmelchenko Спасибо за замечание. Поправил. Проверьте, пожалуйста. 14 фев 2017 в 16:49
3

Может быть так ??

.spin{
  width:60%;
  height:50px;
  margin:10px auto;
  border:1px solid transparent;
}
.parent{
  width:0;
  height:100%;
  background:red;
  animation:width 10s infinite;
}
@-webkit-keyframes width{
  from{
    width:0;
    opacity:0;
  }
  50%{
    opacity:.3;
  }
  to{
   width:100%;
  
  }
}
<div class="spin"> 
  <div class="parent"></div>
</div>
Если с изображением то вот так

*{
  margin:0;
  padding:0;
}
img{
  display:block;
  width:100%;
  height:100%;
}
.wr{
  width:500px;
  height:100px;
  margin:30px auto;
}
.wr_img{
  width:0;
  height:100%;
  overflow:hidden;
  animation:width 10s infinite linear;
}
.wr_img img{
  min-width:500px;
  animation:grey 10s infinite linear;
}
@-webkit-keyframes grey{
  from{
   -webkit-filter:grayscale(100%);
  filter:grayscale(100%); 
    opacity:0;
  }
  50%{
     -webkit-filter:grayscale(70%);
  filter:grayscale(70%); 
    opacity:.5;
  }
  to{
    -webkit-filter:grayscale(0%);
  filter:grayscale(0%);  
    opacity:1;
  }
}
@-webkit-keyframes width{
  from{
    width:0;
  }
  to{
    width:100%;   
  }
}
<div class="wr"> 
  <div class="wr_img"> 
    <img src="http://ic.pics.livejournal.com/zzaharr/34875586/43970/original.png">
  </div>
</div>
И ещё один

*{
  margin:0;
  padding:0;
  font-size:0;
}
.a{
  width:500px;
  margin:auto;
  position:relative;
}
.a img{
  display:block;
  width:500px;
  height:300px;
  min-width:500px;
  max-width:500px;
  object-fit:contain;
}

.a .a2{
  width:300px;
  overflow:hidden;
  position:absolute;
  top:0; right:1px;

}
.a .a2 img{
  margin-left:-200px;
-ms-filter: grayscale(1) sepia(1);
-webkit-filter: grayscale(1) sepia(1);
-moz-filter: grayscale(1) sepia(1);
-o-filter: grayscale(1) sepia(1);
filter: grayscale(1) sepia(1);
}

/*** .b ****/

.b{
  width:500px;
  margin:auto;
  position:relative;
}
.b img{
  display:block;
  width:500px;
  height:300px;
  min-width:500px;
  max-width:500px;
  object-fit:contain;
}

.b .a1{
  width:200px;
  overflow:hidden;
  position:absolute;
  top:0;

}
.b .a1 img{
  margin-left:;
-ms-filter: grayscale(1) sepia(1);
-webkit-filter: grayscale(1) sepia(1);
-moz-filter: grayscale(1) sepia(1);
-o-filter: grayscale(1) sepia(1);
filter: grayscale(1) sepia(1);
}
<div class="a"> 

<div class="a1"> 
  <img src="http://img.mota.ru/upload/wallpapers/source/2013/11/18/13/01/38087/KRJFfPhlVR.jpg">
</div>
  
<div class="a2">
  <div class="a22">
   <img src="http://img.mota.ru/upload/wallpapers/source/2013/11/18/13/01/38087/KRJFfPhlVR.jpg">
    </div>
</div>

</div>

<div class="b"> 

<div class="a1"> 
  <img src="http://img.mota.ru/upload/wallpapers/source/2013/11/18/13/01/38087/KRJFfPhlVR.jpg">
</div>
  
<div class="a2">
  <div class="a22">
   <img src="http://img.mota.ru/upload/wallpapers/source/2013/11/18/13/01/38087/KRJFfPhlVR.jpg">
    </div>
</div>

</div>

1
3

Просто наложите картинку с фильтром на бэкграунд без фильтра. Это если адаптив не нужен...

div {
  width: 500px;
  height: 231px;
  background-image: url("http://beerhold.it/500/231");
  overflow: hidden;
}

img {
  width: 250px;
  height: 231px;
  object-fit: none;
  object-position: top left;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);}
}
<div>
  <img src="http://beerhold.it/500/231">
<div>

2
  • Не так воообщем не пойдет 2 изображение это усложнит загрузку страницы еще больще.
    – Sauron
    27 июл 2016 в 19:55
  • На css вы по другому не сделаете - свойства применяются к селектору целиком, а не к половине. 27 июл 2016 в 20:00
2

Может after и before. before ставить цветной а after чёрнобелым

2
  • Тоже получается буду использовать 2 изображения.
    – Sauron
    27 июл 2016 в 19:56
  • 1
    загружаться будет только одна картинка.
    – Arnial
    27 июл 2016 в 20:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.