Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как правильно на css сделать фильтр? (https://javascript.ru/forum/xhtml-html-css/77209-kak-pravilno-na-css-sdelat-filtr.html)

gsdev99 06.04.2019 16:04

Как правильно на css сделать фильтр?
 
Вложений: 2
Всем привет. Ребята, подскажите, пожалуйста, как на css сделать следующую задачу. У меня есть исходное изображение: init.png
И есть, например цвет: #2e305f. Мне необходимо наложить этот цвет на исходное изображение и получить следующий результат: filter.png

Malleys 06.04.2019 20:51

Можно при помощи 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>

рони 06.04.2019 20:57

Malleys,
:thanks:

gsdev99 16.04.2019 15:38

Большое спасибо.


Часовой пояс GMT +3, время: 00:25.