Может ли фоновое изображение выходить за границы div?

Question

Может ли фоновое изображение выходить за границы div? Относится ли переполнение: видимое к этому?

Answer 1

Нет, фон не может выходить за границы элемента.

Стиль overflow определяет, как элемент реагирует, когда содержимое превышает указанный размер элемента.

Однако, плавающий элемент внутри div может выходить за пределы div, и этот элемент может иметь фон.Однако полезность этого ограничена, так как в IE7 и более ранних версиях есть ошибка, которая приводит к росту div вместо того, чтобы показывать плавающий элемент за его пределами.

Answer 2

Следуя совету kijin , я хотел бы поделиться своим решением для смещения изображения:

/** 
  * Only effective cross-browser method to offset image out of bounds of container AFAIK, 
  * is to set as background image on div and apply matching margin/padding offsets:
  */

#logo {
  margin:-50px auto 0 auto;
  padding:50px 0 0 0;
  width:200px;
  height:200px;
  background:url(../images/logo.png) no-repeat;
}

Я использовал этот пример для простого элемента div <div id="logo"></div>, чтобы расположить мой логотип с вертикальным смещением -50px. (Обратите внимание, что комбинированные настройки полей и отступов гарантируют, что вы не столкнетесь с проблемами, связанными с коллапсом.)

Answer 3

невозможно установить фоновое изображение «вне» его элемента,

НО ВЫ МОЖЕТЕ СДЕЛАТЬ то, что вы хотите с помощью элемента 'PSEUDO' и сделать этолюбой размер, который вы хотите, и разместите его там, где вы хотите.см. здесь: я установил стрелку за пределами диапазона

здесь указан код

HTML:

<div class="tooltip">
<input class="cf_inputbox required" maxlength="150" size="30" title id="text_13" name="name" type="text"><span class="msg">dasdasda</span>
</div>

сильный текст

 .tooltip{position:relative; float:left;}
    .tooltip .msg {font-size:12px;
        background-color:#fff9ea;
        border:2px #e1ca82 solid;
        border-radius:5px;
        background-position:left;
        position:absolute;
        padding:4px 5px 4px 10px;
        top:0%; left:104%;
        z-index:9000; position:absolute; max-width:250px;clear:both;
    min-width:150px;}


    .tooltip .msg:before {
        background:url(tool_tip.png);
        background-repeat:no-repeat;
    content: " ";
        display: block;
        height: 20px;
        position: absolute;
        left:-10px; top:1px;
        width: 20px;
        z-index: -1;
        }

см. здесь пример: http://jsfiddle.net/568Zy/11/

Answer 4

Нет, фон не выходит за границы.Но вы можете растянуть границу так далеко, как хотите, используя padding и несколько хитроумных настроек отрицательных полей и позиции.

Answer 5

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

footer{
 background-color: transparent!important;
 top: -50px;
 margin-bottom: -50px;
}

Answer 6

Я пытался использовать отрицательные значения для background-position, но это не сработало (по крайней мере, в Firefox).На самом деле нет никаких причин для этого.Просто установите фоновое изображение на один из элементов выше в иерархии.

Answer 7

После небольшого исследования: нет и нет :) 1001 *