выровнять background-image: after к его родительскому контейнеру

0

Я хочу получить прозрачное фоновое изображение в своем 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;
}
Теги:
background-image
opacity

2 ответа

1
Лучший ответ

Вместо использования :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 */
}
Поделиться
  • 0
    по какой-то причине это не работает: /
  • 0
    @Jere вы удалили :after стилей?
Показать ещё 4 комментария
0

Установите ваш .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;

}

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню