Как с помощью css без изменения html наложить картинку?

Question

[choodo]

Как, не изменяя этот код, наложить поверх facebook.svg другую картинку с помощью css? У самого пока не получилось...

<ul id="id1">
	<li id="id-facebook">
		<a href="https://www.facebook.com/foo">
			<img src="https://example.com/images/facebook.svg" width="18" height="18" alt="Facebook">
		</a>
	</li>
</ul>

Comments

[Иван]

Странная задача какая-то..

Answer 1

[Stalker_RED]

Как-то так:

#id-facebook a {
  position: relative;
  z-index: 1;
}
#id-facebook a:after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url(...);
  background-size: cover;
  z-index: 2;
}

Но не факт, что сходу сработает, вы же не показали какой у вас css.

Comments

[choodo]

почти :)
спасибо!

Answer 2

[Андрей Буров]

htmlbook.ru/css/before / after, z-index и background-image