Растянуть только часть изображения

#html #css

#HTML #css

Вопрос:

Я хочу создать div, в котором только часть фона будет растягиваться, если div станет больше.

Ситуация :

Мое изображение можно разделить на 3 части (1: верхняя часть, 2: средняя часть, 3: нижняя часть).
Мой div имеет длину Ypx, где Y> Изображение 1.высота Изображение 3.высота
Мой div имеет ту же ширину, что и изображение

Запрос :

Изображения 1 и 3 должны отображаться всегда.
Изображение 2 должно растягиваться в соответствии с размером div.

Пример изображения :

Моя проблема

1. что ж, ваша ссылка плохо объясняет ваш вопрос, может быть, определите ваш верхний и нижний колонтитулы как абсолютные, и ваше тело изменится, вы пробовали это ?? и в следующий раз предоставьте какой-нибудь код, пожалуйста, чтобы получить помощь

2. Я не вижу, какой код я мог бы предоставить, кроме <did>Lorem Ipsum</div> … Вы говорите о верхнем и нижнем колонтитулах, поэтому вы предлагаете мне сделать 3 вертикальных разделения? Проблема в том, что я хочу, чтобы содержимое было поверх 3 частей изображения, а не только в середине div.

3. ну, в вашем запросе говорилось, что изображение 2 должно растягиваться, но с вашим разъяснением вы хотите, чтобы ваш верхний, основной и нижний колонтитулы изменились ?? это то, что я воспринимаю с вашим ответом, не так ли?? или попробуйте выполнить поиск по другой ссылке, которая показывает, что вы ищете:-D

4. Отредактировано, надеюсь, это более понятно!

5. Разделите его на 3 изображения. Создайте контейнер div с двумя разделениями для верхнего и нижнего элементов внутри него. Расположите эти разделы абсолютно сверху и снизу и установите соответствующие фоновые изображения. Установите фоновое изображение самого контейнера в качестве среднего изображения.

Ответ №1:

Вы можете использовать a border-image для достижения этой цели без дополнительных элементов в вашем HTML. Примените границу к :before псевдоэлементу с z-index значением -1, чтобы поместить его за основное содержимое. Установите ширину верхней и нижней границы равной высоте красной и синей полос (67 пикселей в этом примере), а левую и правую границы равными 0. Используйте fill в border-image , чтобы использовать середину изображения в качестве фона. И используйте border-box for box-sizing , чтобы иметь границы внутри элемента.

 .flagbg {
    position:relative;
    width:213px;
}
.flagbg:before {
    box-sizing:border-box;
    z-index:-1;
    position:absolute;
    top:0;
    left:0;
    content:'';
    height:100%;
    width:100%;
    border-width:67px 0 67px 0;
    border-image:url('flag.png') 67 0 67 0 fill repeat stretch;
}

скрипка http://jsfiddle.net/L9e3T / — вы можете редактировать текст в области результатов и видеть, как он динамически изменяется

1. Отличный ответ, но как я могу поместить это в div? См. скрипку jsfiddle.net/L9e3T/5 : Изображение исчезает за родительским div (даже если я попытаюсь установить z-index:-2 для родительского div)

2. z-index работает только с absolute relative элементами, расположенными или расположенными. Таким образом, вы можете создать родительский div position:relative или применить положительное z-index значение к .flag div. Пример первого здесь jsfiddle.net/L9e3T/6

3. Спасибо! Но тогда больше невозможно выделить или щелкнуть текст (вы можете видеть это в своей скрипке), есть ли решение для этого?