Для простого полупрозрачного цвета фона лучше всего подходят вышеуказанные решения (изображения CSS3 или bg). Однако, если вы хотите сделать что-то более изощренное (например, анимацию, несколько фонов и т. Д.), Или если вы не хотите полагаться на CSS3, вы можете попробовать «технику панели»:
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
}
.pane > .back {
position: absolute;
width: 100%; height: 100%;
top: auto; bottom: auto; left: auto; right: auto;
}
.pane > .cont {
position: relative;
z-index: 10;
}
<p class="pane">
<span class="back" style="background-color: green; opacity: 0.6;"></span>
<span class="cont" style="color: white;">Hello world</span>
</p>
Техника работает с использованием двух «слоев» внутри элемента внешней панели:
- один («назад»), который соответствует размеру элемента панели, не влияя на поток содержимого,
- и один («продолжение»), который содержит содержимое и помогает определить размер панели.
Значение position: relative на панели важно; он говорит заднему слою соответствовать размеру панели. (Если вам нужно, чтобы тег <p> был абсолютным, измените панель с <p> на <span> и оберните все это в тег <p> абсолютно позиции.)
Основное преимущество этой техники перед аналогичными перечисленными выше состоит в том, что область не обязательно должна быть определенного размера; как написано выше, он будет соответствовать полной ширине (нормальная компоновка блочных элементов) и только так высоко, как содержимое. Внешний элемент панели может иметь любой размер, если вы пожелаете, при условии, что он прямоугольный (т.е. встроенный блок будет работать; обычный старый встроенный не будет).
Кроме того, это дает вам большую свободу для фона; вы можете поместить в задний элемент действительно что угодно, и это не повлияет на поток контента (если вам нужно несколько полноразмерных подслоев, просто убедитесь, что они также имеют положение: абсолютное, ширина / высота: 100%, и верх / низ / влево / вправо: авто).
Один из вариантов, позволяющий регулировать вставку фона (через верхнюю / нижнюю / левую / правую) и / или закрепление фона (путем удаления одной из пар левая / правая или верхняя / нижняя), - использовать вместо этого следующий CSS:
.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
Как написано, это работает в Firefox, Safari, Chrome, IE8 + и Opera, хотя IE7 и IE6 требуют дополнительного CSS и выражений, IIRC, и в последний раз, когда я проверял, второй вариант CSS не работает в Opera.
На что нужно обратить внимание:
- Плавающие элементы внутри продолжение не будут содержаться. Вам нужно убедиться, что они очищены или иным образом содержатся, или они выскальзывают из дна.
- Поля идут на элементе панели, а отступы - на элементе cont. Не используйте противоположное (поля на продолжение или отступы на панели), иначе вы обнаружите странности, такие как страница всегда немного шире, чем окно браузера.
- Как уже упоминалось, все это должно быть блоком или встроенным блоком. Не стесняйтесь использовать
<div> s вместо <span> s, чтобы упростить ваш CSS.
Более полная демонстрация, демонстрирующая гибкость этой техники при использовании ее в тандеме с display: inline-block, а также с auto и специфическими width с / min-height с:
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
width: 175px; min-height: 100px;
margin: 8px;
}
.pane > .back {
position: absolute; z-index: 1;
width: auto; height: auto;
top: 8px; bottom: 8px; left: 8px; right: 8px;
}
.pane > .cont {
position: relative; z-index: 10;
}
.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
А вот живая демонстрация широко используемой техники:
