Как сделать так, чтобы картинка фона выходила за пределы блока div?
3 ответа 3
Никак. Только переместить ее в внутрь в еще один блок и уже сделать как вам нужно.
Никак. Однако, в моём случае, фоном был цвет и я добавил в свой div тень таким же цветом:
Зачем Вам это? Добавьте картинку внутрь DIVa, блоку поставьте position:relative , картинке — position:absolute. , дальше позиционируйте, как хотите, картинку внутри блока.
Всё ещё ищете ответ? Посмотрите другие вопросы с метками css или задайте свой вопрос.
Похожие
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459
как создать сайт на wordpress, настроить и оптимизировать wordpress
Давайте продолжим рассматривать использование псевдо-элемента before и в данной статье он позволит нам создать смещение фонового изображения за пределы окна, блока.
Скачать исходники для статьи можно ниже
Давайте рассмотрим вот такой пример:
This background image can be positioned from the right and
bottom because it is using a pseudo-element to act as an additional
background canvas.
The CSS3 background module allows this but is not yet
implemented in many browsers. The pseudo-element technique also has the
added benefit of being able to crop a background image and even position
it partially, or completely, outside its container.
Обратите внимание на квадратик – это и есть картинка с фоновым изображением и она расположена за пределами блока!
Реализовать этот эффект достаточно просто.
Для этого заходим в панель управления вашим сайтом на wordpress, открываем любую запись (можно создать данный эффект не только в записи, но и в любом месте вашего сайт, например в шапке) и переходим в ее редактор, в закладку HTML.
А теперь просто вставляем блок div, к нему мы позднее припишем нужный стиль, который и создаст вышеуказанный эффект.
Пока ничего необычного, просто блок div и текст.
Далее нам нужно открыть файл стилей (style.css) нашего сайта и прописать для данного блока (div >
Давайте разберем код стиля для данного блока, которые можно менять под свой вкус.
Идентификатор position-box – отвечает за стиль отображения самого блока.
Идентификатор position-box:before – добавляет стиль перед блоком “position-box”.
Подробнее идентификатор position-box:
Два первых параметра (position, z-index) не трогаем.
padding – отступы текста в блоке сверху, справа, снизу, слева.
border – граница в блоке.
color – цвет текста в блоке (fff – белый).
background – цвет фона блока (4B92C0 – синий).
width – ширина блока.
Подробнее идентификатор position-box:before:
Три первых параметра (content, position, z-index) не трогаем.
bottom – отступ снизу от блока.
right – отступ справа от блока.
width, height – ширина и высота блока (задается такая же как у картинки, например в нашем примере картинка the-box.png имеет размеры 195 × 230)
background:url – ссылка до картинки, которая будет на переднем плане.
Экспериментируйте с кодом и получайте интересные визуальные эффекты.
PS: Попробуйте скачать картинку с квадратиком в вышеуказанном примере (при помощи, например, правой клавиши мыши) – вы не сможете этого сделать 🙂 – это одно из свойств псевдо-элементов.
Может ли кто-нибудь взглянуть на следующую скрипту: http://jsfiddle.net/R4bCy/1/
Я думал, что div должен отрегулировать его высоту, чтобы разместить его элементы, если элементы не расположены абсолютно.
Почему div не расширяется до полной высоты изображения?
Мне нужно, чтобы изображение было выровнено вправо. Единственные способы, которыми я знаю, как это сделать: align=’right’ , position:absolute; right: 0; и float:right , все из которых делают содержащийся div не отрегулировать его высоту до высоты изображения.
‘Почему div не расширяется до полной высоты изображения?’
Поскольку поплавки будут перекрываться с блоками, только контексты форматирования блоков содержат поплавки. (Здесь вы можете найти довольно хороший обзор всей темы:
Чтобы решить проблему:
align=right фактически приведет к тому, что img будет float: right (атрибут align устарел и css должен использоваться).
Чтобы содержать плавающее изображение в родительском div , вам нужно либо родительский div установить контекст форматирования блока (контексты форматирования блоков заключить вложенные поплавки), либо явно очистить поплавок с дополнительным элементом после img который обозначается как clear: right .
Простое решение для создания контекста форматирования блоков состоит в том, чтобы плавать родительский div , хотя моим предпочтительным решением в этом случае было бы просто установить его overflow на hidden (также приводящее к форматированию блока контекст).