Может ли фоновое изображение быть больше, чем сам div?

Question

Может ли фоновое изображение быть больше, чем сам div?

у меня есть нижний колонтитул div с шириной 100%. Это около 50px высокий, в зависимости от его содержания.

можно ли дать этому # footer фоновое изображение, которое переполняет этот div?

изображение около 800x600px, и я хочу, чтобы он был расположен в левом нижнем углу нижнего колонтитула. Он должен работать как фоновое изображение для моего сайта, но я уже установил фоновое изображение на моем теле. Мне нужно другое изображение, расположенное в левом нижнем углу мой сайт и # нижний колонтитул div будет идеально подходит для этого.

#footer {

    clear: both;

    width: 100%;

    margin: 0;

    padding: 30px 0 0;

    background:#eee url(images/bodybgbottomleft.png) no-repeat left bottom fixed;

}

изображение устанавливается в нижний колонтитул, однако оно не переполняет div. Возможно ли это сделать?

overflow:visible не выполнять работу!

655 9

css image background

9 ответов:

Comments

Ничего не найдено.

Daniel Bingham · Accepted Answer · 2010-11-25 23:16:28

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

transGLUKator · Accepted Answer · 2013-07-20 01:18:56

есть очень простой трюк. Установите заполнение этого div на положительное число и маржу на отрицательное
#wrapper {
     background: url(xxx.jpeg);
     padding-left: 10px;
     margin-left: -10px;
}

Josh Sells · Accepted Answer · 2013-08-08 07:09:10

вы можете использовать CSS3 psuedo элемент, как показано в этой статье

https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/

ArcTanH · Accepted Answer · 2015-04-26 21:48:54

Нет, ты не можешь.

но в качестве надежного обходного пути я бы предложил классифицировать этот первый div как position:relative и использовать div::before для создания базового элемента, содержащего ваше изображение. Классифицируется как position:absolute вы можете переместить его в любом месте относительно вашего начального div.

не забудьте добавить содержимое в новый элемент. Вот несколько примеров:
div {
  position: relative;
}    

div::before {
  content: ""; /* empty but necessary */
  position: absolute;
  background: ...
}
Примечание: Если вы хотите, чтобы он был "сверху" родительского div, используйте .

stephenhay · Accepted Answer · 2010-11-26 00:50:42

вы упомянули уже имея фоновое изображение на body.

вы может установлено, что фоновое изображение html, и на body. Это, конечно, будет зависеть от вашего макета, но вам не нужно будет использовать свой нижний колонтитул для этого.

PanPipes · Accepted Answer · 2015-05-19 13:25:50

использование обложки фонового размера работало для меня.
#footer {
    background-color: #eee;
    background-image: url(images/bodybgbottomleft.png);
    background-repeat: no-repeat;
    background-size: cover;
    clear: both;
    width: 100%;
    margin: 0;
    padding: 30px 0 0;
}
очевидно, быть в курсе проблем с поддержкой, проверьте могу ли я использовать:http://caniuse.com/#search=background-size

hollsk · Accepted Answer · 2010-11-25 23:18:13

не совсем - фоновое изображение ограничено элементом, к которому оно применяется, и свойства переполнения применяются только к содержимому (т. е. разметке) внутри элемента.

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

cambraca · Accepted Answer · 2010-11-25 23:58:01

это может помочь. Это требует, чтобы высота нижнего колонтитула была фиксированным числом. В принципе, у вас есть div внутри нижнего колонтитула div с его нормальным содержанием, с position: absolute, а затем изображение с position: relative отрицательный z-index таким образом, он остается "ниже" всего, и отрицательный top значение высоты нижнего колонтитула минус высота изображения (в моем примере,50px - 600px = -550px). Протестировано в Chrome 8, FireFox 3.6 и IE 9.

Pavlo Kozachuk · Accepted Answer · 2018-05-18 11:52:26

используйте свойство trasform: scale (1.1), чтобы увеличить изображение bg, переместите его вверх с позиции: relative; top: -10px;
<div class="home-hero">
    <div class="home-hero__img"></div>
</div>

.home-hero__img{
 position:relative;
    top:-10px;
    transform: scale(1.1);
    background: {
        size: contain;
        image: url('image.svg');
    }
}