Поместите фоновое изображение за пределы рамки, содержащей div

Question

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

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

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

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

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

Возможно ли это? Любые намеки?

Edit: вот jsFiddle показывает проблему: link

Answer 1

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

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

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

Answer 2

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

Answer 3

В зависимости от деталей вашей ситуации, вы можете быть в состоянии уйти с 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%; 
    } 

Существует немного трюка, участвующий в значениях границы изображения ширины - 32, что является мультипликатором не длиной (не ставить точки) блока, используемый в приграничной ширине (т.е. 1px). Результатом являются поддельные кнопки в первых n-1 столбцах gridview. В моем случае мне не понадобилось ничего в последнем столбце, потому что это CButtonsColumn, у которого нет фильтра. Во всяком случае, я надеюсь, что это поможет людям, ищущим чистое решение CSS & # x1F600; :-D

* Вскоре после этого я обнаружил, что могу просто конкатенировать код для изображения в свойстве «фильтр» массива, используемого для построения CGridColumn, поэтому мое обоснование оказывается спорным. Плюс, похоже, проблема (в Firefox, во всяком случае), при которой повторение границы-изображения вынуждено растягиваться, даже когда задано пространство.Тем не менее, может быть, это может пригодиться кому-то & # x1F615; : - \

Answer 4

Я знаю, что это старый поток, но я просто хотел его обновить и добавить, что это возможно с использованием псевдоэлементов 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 
}