Как добавить этот эффект фонового изображения в div?

Question

Мне нужно добавить следующее подробное изображение к каждому разделу определенного класса на моей странице.

В каркасах это выглядит так:

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

Answer 1

2 Опции:

Вариант 1: Вы делаете 3 деления, которые будут выглядеть примерно так:

<div class="container">
<div class="content">Stuff</div>
<div class="bottom"></div>
</div>

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

Опция 2: Используйте CSS3 свойство border-image.

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

С прозрачным фоном: http://jsfiddle.net/charlescarver/k9uyx/

Для этого также требуется, чтобы браузер поддерживал CSS3.

Answer 2

Вы можете использовать :after в сочетании с абсолютным позиционированием.

См .: http://jsfiddle.net/thirtydot/ChJnr/4/

HTML:

<div class="box"></div>

CSS:

.box {
    width: 250px;
    background: #ccc;
    position: relative;
    padding: 16px;
}
.box:after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -16px;
    background: url(http://dummyimage.com/250x16/f0f/fff);
    height: 16px;
}

Если это необходимо для работы в старых браузерах, вместо этого можно добавить небольшой безобидный span для заменыиспользование :after.

Answer 3

.someClass {
    backgroung-image: url('path-to-image-form-css-file');
    height: 100px;
    width: 100px;
    padding: ...
}

Answer 4

Лично я бы создал такой класс. Это предположение, но я считаю, что это должно работать хорошо:

.someClass {
    background: #FFF url('path') no-repeat center bottom;
    width: 175px;
}

Answer 5

Сделайте это в 3 делителя - один, чтобы содержать весь «оригинальный» div, один div, который плавает в нижней части контейнера div для хранения нижнего изображения, и один, чтобы содержать все остальное.