Поместите фоновое изображение вне границы содержащего div

Я пытаюсь установить фоновое изображение вне фактического содержащего div.

<div class="expandable">Show Details</div>

.expandable
{
    background: transparent url('./images/expand.gif') no-repeat -20px 0px;
}

поэтому изображение "expand" должно в основном появляться только слева от div.

Я не могу заставить это работать, изображение не отображается, когда оно расположено за пределами контейнера. Я не уверен, есть ли трюк CSS, который у меня отсутствует, или если это что-то связано с моей макетом страницы ( "расширяемый" div вложен внутри нескольких других div).

Можно ли это сделать? Любые подсказки?

Изменить: вот jsFiddle, показывающий проблему: ссылка

Ответы

Ответ 1

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

отредактируйте свой вопрос, пробегая мою память, и я пошел и проверил спецификации CSS. Фактически вы можете установить атрибут CSS "background-attachment", который привязывает фон к окну просмотра вместо элемента. Тем не менее, он не работает или не работает в IE, поэтому я его сижу на "не использую" полку в моей голове: -)

edit — Обратите внимание, что этот ответ с 2010 года, и более новые (и, что более важно, широко поддерживаемые) возможности CSS существуют в 2016 году.

Ответ 2

Я знаю, что это старый поток, но я просто хотел его обновить и добавить, что это возможно с использованием псевдо-элементов CSS.

.class:before {
    content: "";
    display: inline-block;
    width: {width of background img};
    height: {height of background img};
    background-image: url("/path/to/img.png");
    background-repeat: no-repeat;
    position: relative;
    left: -5px; //adjust your positioning as necessary
}

Ответ 3

Вы не можете сделать это так, как хотите, но есть довольно простое решение. Вы можете поместить другой 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;
}

Ответ 4

В зависимости от деталей вашей ситуации вы можете уйти с CSS3 border-image- * rules. Например, я эффективно использовал их для размещения "фиктивных кнопок поиска" в строке фильтра виджета CGridView в yii (щелчок в любом месте за пределами полей ввода фильтра инициирует вызов ajax, но эти "кнопки" дают пользователю что-то интуитивно понятное). ~~Мне не стоило подклассифицировать виджет CGridColumn, чтобы взломать html в методе renderFilterCell()~~ * - я хотел получить чистое решение CSS.

  .myclass .grid-view .items {
    border-collapse: separate ;
  }

  .myclass .grid-view .filters td + td {
    border-image-source: url("/path/to/my/img_32x32.png");
    border-image-slice: 0 0 0 100%;
    border-image-width: 0 0 0 32;
    border-image-outset: 0 0 0 40px;
    border-width: 1px;
  }

  .myclass .grid-view .filters input {
    width: 80%;
  }

There is a little bit of a trick involved in the border-image-width values -- that 32 is a multiplier not a length (do not put px) of the unit used in border-width (ie 1px). The result is fake buttons in the first n-1 columns of the gridview. In my case, я didn't need anything in the last column because it is a CButtonsColumn which does not have a filter box. Anyway, я hope this helps people looking for a pure CSS solution 😀:-D

* Not long after writing this, я discovered я can just concatenate code for an image in the 'filter' property of the array used to construct the CGridColumn, so my rationale turns out to be moot. Plus there seems to be an issue (in Firefox, anyway) with the border-image-repeat being forced to stretch even when space is specified. Still, maybe this might come in handy for someone 😕:-\