Как использовать поле сущности в качестве фонового изображения div в слайд-шоу представлений?
У меня есть поле "фоновое изображение" для определенного типа сущности. Я хочу иметь возможность загружать туда изображение и отображать это изображение в качестве фонового изображения в div, созданном представлением. Примером использования может служить слайд-шоу "Представления", в котором фоновое изображение будет фоновым изображением просматриваемого слайда, а поверх него будут помещены заголовок объекта и любые другие выбранные поля.
Одна из моих мыслей заключалась в том, чтобы переписать вывод одного из поля слайд-шоу, но я не уверен, как я могу переписать изображение в положение "фоновое изображение".
Возможно ли это? Есть идеи, как этого добиться?
Спасибо!
2 answers
Это больше похоже на вопрос css/html, но вот что:
Вы можете оформить свой вид так, чтобы он выводил каждый слайд следующим образом:
<div class='container'>
<div class='background'><img src='/img/url/here.jpg' /></div>
<div class='foreground'>Overlay copy</div>
</div>
С вашим css следующим образом:
.container {
position: relative; /* this is required to keep all absolutely positioned child elements contained */
overflow: hidden;
height: 100px;
width: 1200px;
}
.background {
position: absolute;
left: -200px;
top: 0;
height: 100px;
width: 1200px;
z-index: 1;
}
.foreground {
position: absolute;
left: 50px;
top: 50px;
height: 50px;
width: 300px;
z-index: 2;
}
Это позволит расположить div фона на 0,0 (относительно контейнера) и расположить div переднего плана перед фоном.
Обязательно ознакомьтесь с модулем Форматирования фоновых изображений . Это позволяет вам определить фоновое изображение (и размер) для любого заданного CSS-селектора, как указано в вашем представлении (с использованием поля изображения).
На самом деле это отвечает популярному требованию использовать определенные фоновые изображения в представлениях (и избегать метода встроенного стиля, который невозможен в представлениях)