наполняющие DIV внутри другого DIV и установите Непрозрачность

Question

Скажем, у меня есть объект дерева HTML следующим образом:

<div> 
    <p>Text 1</p> 
    <p>Text 2</p> 
    <div></div> 
</div> 

Я хочу CSS наводнить внутренний DIV внутри внешней. Однако я хочу, чтобы текст и т. Д. Выглядел неповрежденным. Моя идея: я могу установить цвет bg и непрозрачность для внутреннего div и не влиять на текст. Как мне это сделать?

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

Answer 1

Вы можете установить внешний div в положение: относительный, а затем внутренний div до:

 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 

И установите все, что вы хотите на нем. Теперь он должен охватывать все внутри этого первого div. Если вы хотите, чтобы текст появится на вершине его просто установить:

 
div p { 
    position: relative; 
    z-index: 1; 
} 

div div { 
    z-index: 0; 
} 

Answer 2

Вы имеете в виду вот это?

div>div { 
    background-color: red; 
    opacity: 0.5; 
} 

Он использует дочерний селектор, поэтому будут выбраны только div непосредственно внутри другого div. Поскольку div - это самый распространенный элемент HTML, я бы предложил присвоить хотя бы одно из них именем класса.

<div class="innerDiv"></div> 

Вы можете стилизовать с .innerDiv {} в вашем CSS стилей.

Answer 3

Вы не сможете это то, что вам нужно сделать, это следующее:

<div class="maindiv"> 
    <p>Text 1</p> 
    <p>Text 2</p> 
</div> 

<div class="floatingbkg"></div> 

и применить непрозрачность floatingbkg, а затем поместить их вместе с floatingdiv за maindiv.

Я создал jqueryplugin, который сделал это, но я не закончил его, он смоделировал всплывающие окна с iphone.

вам нужно будет использовать относительное позиционирование или такое, чтобы делители делили друг друга.

Answer 4

Это не для меня ясно, что вы имеете в виду: «затопить», но для достижения этой цели вы можете использовать правила CSS hyerarchy:

div {} 

Влияет на все дивы

div div{} 

Влияет на все дивы внутри других разделов

Answer 5

Использование RGBA - см CSS-Tricks для примеров. Это изменяет непрозрачность фона, но не изменяет прозрачность текста.