Я хочу получить прозрачное фоновое изображение в своем div. Чтобы сделать это без выполнения дочерних элементов содержимого. Я определил фоновое изображение.content: after и захотел установить его положение на позицию моего.content.
Проблема в том, что в этом коде фоновое изображение начинается top: 0, left: 0, right: 0, bottom: 0
тела. Как я могу заставить это начать с моего.content? Другая проблема заключается в том, что у меня на самом деле есть заголовок, который имеет гибкую высоту. Поэтому не знаю абсолютного верхнего положения.content.
.content {
width: 200px;
margin: 10px auto;
}
.content:after {
content: "";
background-image url("http://works.mihaimoga.com/stackoverflow_logo.jpg");
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.7;
}
Вместо использования :after
псевдо класса вы можете использовать фоновое значение как rgba. который не будет влиять на прозрачность дочерних элементов.
.content {
width: 200px;
margin: 10px auto;
background-image url("http://works.mihaimoga.com/stackoverflow_logo.jpg");
background-color: rgba(255, 255, 255, 0.7); /* added */
}
:after
стилей?
Установите ваш .content
div в position: relative
, и ваш .content:after
to position: absolute
. Убедитесь, что вы применили правильные z-indexes
. .content:after
должен иметь более высокий z-индекс, чем .content
.
должен выглядеть так:
.content {
width: 200px;
margin: 10px auto;
position: relative;
z-index: 10;
}
.content:after {
content: "";
background-image url("http://works.mihaimoga.com/stackoverflow_logo.jpg");
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.7;
z-index: 20;
}