Как svg изображению задать фон? Как применить z-index к ::before и ::after?

Question

[malcore_hardcore968]

Есть svg иконка, надо задать красный фон. Сама svg загружается через CSS. Вопрос: Как этому svg изображению задать фон? Пробовал z-index расставить, не получается...

.owl-prev, .owl-next
	position: absolute
	z-index: 3
	top: 50%
	border-radius: 25px
	height: 18px
	width: 18px
	margin: 11px 35px
	background-image: url("../img/favicon/arrow-slide.svg")
	background-size: contain

		&::before
			content: ""
			position: absolute
			z-index: 2
			background: #000
			width: 48px
			height: 48px

Answer 1

[Олег]

А не проще в svg прописать fill: #fff;

Comments

[malcore_hardcore968]

мне нужно потом с помощью css менять его фон, hover, например

[Олег]

malcore_hardcore968: https://jsfiddle.net/joomla/k1Lpd093/

[Олег]

malcore_hardcore968: https://jsfiddle.net/joomla/k1Lpd093/1/

Answer 2

[_ _]

А в чем проблема background-color вместе с svg задать?