Поместить фоновое изображение за границу содержащего div
Я пытаюсь установить фоновое изображение за пределами фактического содержащего div.
.expandable
{
background: transparent url('./images/expand.gif') no-repeat -20px 0px;
}
, поэтому "расширенное" изображение должно в основном отображаться только для слева от div.
Я не могу заставить это работать, изображение не отображается, когда оно расположено за пределами контейнера. Я не уверен, есть ли какой-то трюк с CSS, который мне не хватает, или это что-то для макета моей страницы («расширяемый» div вложен в несколько других div).
Можно ли это сделать? Есть подсказки?
Изменить: вот jsFiddle, показывающий проблему: ссылка
2 ответа
Вы' вам придется поместить фоновое изображение в отдельный элемент. Позиции фонового изображения не могут размещать изображение за пределами элемента, к которому они применяются.
edit ваш вопрос встряхнул мою память, и я пошел и проверил спецификации CSS. На самом деле существует CSS-атрибут background-attachment, который вы можете установить, который привязывает фон к области просмотра, а не к элементу. Однако в IE он глючит или не работает, поэтому он у меня в голове лежит на полке «не использовать» :-)
edit — Обратите внимание, что этот ответ датирован 2010 годом и новее. (и, что более важно, широко поддерживаемые) возможности CSS существуют в 2016 году.
Вы не можете сделать это так, как хотите, но есть довольно простое решение. Вы можете поместить другой div внутри .expandable , например:
<div class="expandable">Show Details<div class="expandable-image"></div></div>
Тогда ваш CSS будет выглядеть примерно так:
.expandable{ position:relative; }
.expandable-image{
position:absolute; top:0px; left:-20px;
width:<width>px; height:<height>px;
background: url('./images/expand.gif') no-repeat;
}