Заливка (до определенной высоты) контейнер DIV с фоновым изображением

У меня есть контейнер DIV, в котором я поместил два фоновых изображения, как показано ниже:Заливка (до определенной высоты) контейнер DIV с фоновым изображением

Изображение удалено

CSS в картинке:

#test44{ 
background-image: url("images/reference_opt.png"), url("images/content_opti11_opt.png"); 
background-position: 41px bottom, 82px 25px; 
background-repeat: no-repeat, repeat-y; 
background-size: 192px 292px, 1097px auto; 
margin-bottom:10px; 
min-height: 310px;

} Соответствующие разметки:

<div id="test44"> 
<table> 
<tr> 
<td class="td"> 
<div >Reference 1</div></td> 
<td> 
<div class="content"> 
Your objective tells a prospective employer the type of work you are currently pursuing. The rest of your resume should be designed to most effectively support your objectivekuedyg djkhdbkd jd asjkds dkjdb 
</div></td> 
</tr> 
</table> 
</div>

Но мое требование, как на картинке ниже:

Изображение удалено

источник

2013-11-20 Abs

Можете ли вы опубликовать скрипку, пожалуйста? Нам было бы легче отлаживать –

Что вы ожидаете, если у вас есть 3 или более арбитров в вашем контенте, тогда наклонная метка «Ссылка» будет перезаписана текстом? –

Наклонное изображение снижается по мере увеличения содержимого. – Abs

Вместо того, чтобы использовать два фонового изображения (который не очень логично, и может быть сложно), то лучше использовать два divs; поставить самый большой контейнер (т.е. # test44) в relative положения, с соответствующим background-image

Тогда вы поставите другой DIV, который будет служить для изображения смещения, и положение его absolute положения (относительно своего родителя)

Вот пример с фоном цветом, работает так же с изображениями: jsfiddle

источник

2013-11-20 14:24:16

Пожалуйста, проверьте мой отредактированный вопрос. Я добавил ссылку jsfiddle. В скрипте, которую вы указали. Если я заменил идентификатор классом и дважды повторил разметку, как можно увеличить или уменьшить фоновое изображение в соответствии с данными, чтобы эти две разметки никогда не перекрывались. – Abs

Вы должны работать с фиксированными размерами, так как при изменении размера вам также придется менять координаты позиции ... –

На самом деле у меня не было возможности работать с фиксированным размером, поскольку данные поступали из базы данных, и это может быть больше или Вы видели мою скрипку? – Abs

Вы можете расположить второе изображение в нижней части абсолютно с помощью следующего CSS:

#test44{ 
    background-image: url("images/content_opti11_opt.png"); 
    background-position: 82px 25px; 
    background-repeat: repeat-y; 
    background-size: 1097px auto; 
    margin-bottom:10px; 
    min-height: 310px; 
    position: relative; 
} 

#test44:after { 
    background-image: url("images/reference_opt.png"); 
    background-position: 41px bottom; 
    background-size: 192px 292px; 
    height: *height of image*; 
    width: *width of image*; 
    content: ''; 
    display: block; 
    position: absolute; 
    bottom: -something; 
    left: 0; 
}

Это должно позиционировать его хорошо внизу, даже когда контент становится больше. Функция :after создает какой-то дополнительный элемент после вашего div, который вы используете в качестве изображения здесь.

источник

2013-11-28 10:13:07

Это тоже хорошо :) –

Заливка (до определенной высоты) контейнер DIV с фоновым изображением

ответ

Смежные вопросы