Поместить фоновое изображение за границу содержащего div - PullRequest
Новая
       2

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

17 голосов
/ 23 августа 2010

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

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

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

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

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

Возможно ли это сделать?Есть подсказки?

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

Ответы [ 4 ]

25 голосов
/ 21 августа 2014

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

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

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

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

8 голосов
/ 23 августа 2010

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

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

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

* Вскоре после написания этого я обнаружил, что могу просто объединить код для изображения в свойстве 'filter' массива, использованного для построения CGridColumn, поэтому мое обоснование оказывается спорным. Плюс, кажется, есть проблема (в любом случае в Firefox) с принудительным растягиванием border-image-repeat, даже когда задано пространство. Тем не менее, может быть, это кому-то пригодится & # x1F615; : - \

...