У меня есть страница, где содержимое располагается в центре страницы с помощью margin: auto, и я хочу добавить фон, центрированный таким же образом, но из-за того, что фон не появляется при прокрутке вниз, у меня естьприбегнул к использованию position: fixed, что неплохо сработало.
Тем не менее, его централизованное позиционирование точно так же, как и контент, создает огромную проблему, потому что игра с left: x% и margin-left: -y% isкошмар и никогда не совсем хорошо работает, что все разрешения экрана.
Разметка проста:
<div id="main" class="container">
<div class="overlay"></div>
<div id="content"></div>
</div>
Вы можете увидеть сайт ЗДЕСЬ
ЛУЧШАЯ конфигурация CSS, которую я придумал, такова:
.overlay
{
position: fixed;
top: 0; /* These positions makes sure that the overlay */
bottom: 0; /* will cover the entire parent */
left: 0;
width: 72%;
margin-left:14%;
height:100%;
background: #000;
opacity: 0.45;
-moz-opacity: 0.45; /* older Gecko-based browsers */
filter:alpha(opacity=45); /* For IE6&7 */
}
Я пробовал много комбинаций, но фон всегда менялся по-другому, чем контент, и я бы хотел, чтобы он оставался на своем месте.Положение: абсолютное с полем: авто работает отлично, за исключением случаев, когда вы прокручиваете вниз.
Вышеуказанная конфигурация работает хорошо, за исключением "минимальной ширины".Если бы я мог заставить его прекратить сворачивать после определенного момента, это было бы идеально.
Большое спасибо заранее, если у вас есть решение для этого