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

Ответ 1

Нет, фон не может выйти за пределы элемента.

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

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

Ответ 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> для размещения моего логотипа с вертикальным смещением -50 пикселей. (Обратите внимание, что комбинированные настройки margin/padding гарантируют, что вы не столкнетесь с проблемами с разворачиванием маржи.)

Ответ 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/

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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