Дочерний блок наследует прозрачность родителя. Как убрать?

@zeva · Регистрация: 18.12.2011

Студворк — интернет-сервис помощи студентам

Здравствуйте! Имеется следующее:

HTML5
1
2
3
4
5
<div id="black_block">
  <div id="subscribe">
    ...
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#black_block {
  background-color:#000000; 
  position:fixed; 
  top: 0;
  left: 0;
  height:100%; 
  width:100%; 
  z-index:10000;
  opacity: 0.8;
}
 
#subscribe  {
  background-color:#fff; 
  border-radius: 5px;
  border: 1px #000 solid;
  position:relative; 
  top: 45%;
  left: 38%;
  height:100px; 
  width:475px; 
  z-index:10001;
  opacity: 1;
}

Нужно, чтоб дочерний (внутренний блок) не был прозрачным. Подскажите, пожалуйста, где ошибаюсь?

@dolte · 20.09.2013, 14:04

Средствами CSS - нет. Это свойство наследуется всеми потомками. Желаемого эффекта можно добиться путем позиционирования содержимого.

@zeva · 20.09.2013, 14:28 **[ТС]**

dolte, можно подробнее? Я ведь и так позиционирую внутренний блок и z-index у него больше, чем у внешнего.

@dolte · 20.09.2013, 14:32

zeva, нужно отделить блок от блока в 2 разных контейнера, независимых, а потом поместить их друг над другом.

@zeva · 20.09.2013, 15:24 **[ТС]**

Ааа! Спасибо!

@DesignBR · 21.09.2013, 09:50

Всегда дочерний элемент зависит от родительского. Пример: включите в комнате свет, выйдите из комнаты и закройте плотно дверь. как бы ярко не горела лампа, вы не увидите ее света. чем прозрачнее будет дверь, при той же яркости лампы, тем больше. света вы увидите.

@agrushin · 26.09.2017, 23:10

RGBA

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#black_block {
  /*background-color:#000000; */
  background-color: rgba(0, 0, 0, 0.8);
  position:fixed; 
  top: 0;
  left: 0;
  height:100%; 
  width:100%; 
  z-index:10000;
  /*opacity: 0.8;*/
}
 
#subscribe  {
  background-color:#fff; 
  border-radius: 5px;
  border: 1px #000 solid;
  position:relative; 
  top: 45%;
  left: 38%;
  height:100px; 
  width:475px; 
  /*z-index:10001;
  opacity: 1;*/
}

@Dark Dragon · 29.10.2018, 04:56

В этом случае корректнее сказать, что когда ты пытаешься нацепить на прозрачную дверь (родительский элемент) табличку с надписью "не беспокоить" (дочерний элемент), то никто твое сообщение не увидит, поскольку табличка тоже внезапно стала прозрачной (унаследовала у двери это свойство). Понял, гений с лампами?

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@dolte Человек 331 / 205 / 63 Регистрация: 04.02.2013 Сообщений: 1,223
	20.09.2013, 14:04
	Средствами CSS - нет. Это свойство наследуется всеми потомками. Желаемого эффекта можно добиться путем позиционирования содержимого. 0

@zeva 1 / 1 / 0 Регистрация: 18.12.2011 Сообщений: 105
	20.09.2013, 14:28 [ТС]
	dolte, можно подробнее? Я ведь и так позиционирую внутренний блок и z-index у него больше, чем у внешнего. 0

@dolte Человек 331 / 205 / 63 Регистрация: 04.02.2013 Сообщений: 1,223
	20.09.2013, 14:32
	zeva, нужно отделить блок от блока в 2 разных контейнера, независимых, а потом поместить их друг над другом. 0

@zeva 1 / 1 / 0 Регистрация: 18.12.2011 Сообщений: 105
	20.09.2013, 15:24 [ТС]
	Ааа! Спасибо! 0

@DesignBR 10 / 10 / 1 Регистрация: 30.06.2013 Сообщений: 87
	21.09.2013, 09:50
	Всегда дочерний элемент зависит от родительского. Пример: включите в комнате свет, выйдите из комнаты и закройте плотно дверь. как бы ярко не горела лампа, вы не увидите ее света. чем прозрачнее будет дверь, при той же яркости лампы, тем больше. света вы увидите. 0

@Dark Dragon 0 / 0 / 0 Регистрация: 15.05.2014 Сообщений: 21
	29.10.2018, 04:56
	В этом случае корректнее сказать, что когда ты пытаешься нацепить на прозрачную дверь (родительский элемент) табличку с надписью "не беспокоить" (дочерний элемент), то никто твое сообщение не увидит, поскольку табличка тоже внезапно стала прозрачной (унаследовала у двери это свойство). Понял, гений с лампами? 0