Не отображает background-color поверх картинки, как исправить?

Question

[lue merg]

выходит вот

а должен быть черный прозрачный фон у заголовков
вот часть кода
html

<div class="item">
	<div class="item-inner">
		<img src="https://pp.vk.me/c622026/v622026294/e4ef/Nxw6qvyQ60E.jpg" class="center">
		<p class="spec">accessory</p>
	</div>
</div>

css

.item {
	width:33%;
	height:300px;
	padding-left:15px;
	padding-right:15px;
	display:inline-block;
}
.item-inner {
	border:5px solid #4f1404;
	height:100%;
	overflow: hidden;
}
.item-inner img {
	height:100%;
}
.center {
	margin: 0px -100px;
}
.spec {
	color:white;
	margin-top:-50px;
	font-size:20px;
	background-color:rgba(0, 0, 0, 0.8);
}

Comments

[lue merg]

Владислав Турчинский: ну в общем то да

[lue merg]

Владислав Турчинский: у меня всегда с этим проблемы были

Answer 1

[Ваня]

Добавить к .spec

position: relative;

Вы это хотели?

Comments

[lue merg]

огромное спасибо в следующий раз буду знать

Answer 2

[gleendo]

Все работает! codepen.io/evg_/pen/JdQqjV

Comments

[lue merg]

у меня тоже все работает но если весит картинка то фон исчезает под картинку и фон перестает быть видимым

[lue merg]

z-index пробовал

[gleendo]

lue merg: Ну надо было о картинке как то позаботится. Все же ее не видно. Сейчас попробую с картинкой.

[lue merg]

con_: поставил картинку из интернета можешь посмотреть

[lue merg]

con_:

Answer 3

[lue merg]

поиграться можно тут
codepen.io/anon/pen/QbXRbq