Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.04.2019, 16:04
Аспирант
Отправить личное сообщение для gsdev99 Посмотреть профиль Найти все сообщения от gsdev99
 
Регистрация: 03.02.2019
Сообщений: 44

Как правильно на css сделать фильтр?
Всем привет. Ребята, подскажите, пожалуйста, как на css сделать следующую задачу. У меня есть исходное изображение: init.png
И есть, например цвет: #2e305f. Мне необходимо наложить этот цвет на исходное изображение и получить следующий результат: filter.png
Изображения:
Тип файла: jpg init.jpg (18.1 Кб, 3 просмотров)
Тип файла: jpg filter.jpg (3.4 Кб, 4 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 06.04.2019, 20:51
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,190

Можно при помощи SVG-фильтра, если вам нужно применить к <img>...
<style>

img {
	-webkit-filter: url(#opacity);
	filter: url(#opacity);
}

</style>
<img src="https://i.imgur.com/OE1rGv9.jpg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	<defs>
		 <filter id="opacity">
			 <feColorMatrix type="matrix" color-interpolation-filters="sRGB"
					values="0.03 0    0    0.17 0
					        0    0.03 0    0.17 0
					        0    0    0.03 0.38 0
					        0    0    0    1    0 " />
		 </filter>
	</defs>
</svg>


или при помощи градиента, если к фону...
<style>

html {
	background:
		linear-gradient(rgba(18%, 18%, 37%, .97), rgba(18%, 18%, 37%, .97)),
		url("https://i.imgur.com/OE1rGv9.jpg")
	;
}
	
</style>

Последний раз редактировалось Malleys, 06.04.2019 в 20:54.
Ответить с цитированием
  #3 (permalink)  
Старый 06.04.2019, 20:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,874

Malleys,
Ответить с цитированием
  #4 (permalink)  
Старый 16.04.2019, 15:38
Аспирант
Отправить личное сообщение для gsdev99 Посмотреть профиль Найти все сообщения от gsdev99
 
Регистрация: 03.02.2019
Сообщений: 44

Большое спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно сделать массив и его использовать? Ihor20121993 Общие вопросы Javascript 3 16.10.2018 16:00
Как правильно сделать фильтрацию? s24344 Элементы интерфейса 9 17.09.2018 15:24
Подскажите как правильно сделать анимацию выезда ? Валерий1996 Общие вопросы Javascript 1 06.09.2015 12:49
Как сделать двойной курсивный текст в CSS? Night Vigilancer (X)HTML/CSS 2 08.02.2014 18:40
Подскажите, как сделать правильно отрисовку без перезагрузки всей страницы yiooxir Angular.js 1 24.12.2013 16:30