#css #background-image
#css #фоновое изображение
Вопрос:
Мне нужно добавить следующее подробное изображение к каждому div определенного класса на моей странице.
В каркасах это выглядит так:
Я не могу просто использовать приведенное выше изображение полностью, потому что пробелы могут иметь переменную высоту. Как бы я добился этого, используя свойство background image в CSS? Все, что я пробовал до сих пор, не работает. Есть идеи?
Комментарии:
1. Некоторый код / объяснение того, что вы пробовали, было бы неплохо.
Ответ №1:
Вы могли бы использовать :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 .
Комментарии:
1. Однако, не работает, если изображение имеет прозрачный фон, поскольку это добавляет к нему
#cccфон.2. Это выглядит многообещающе! Я собираюсь опробовать это сегодня вечером и рассказать вам, как это происходит. Спасибо!
3. @Charlie: Вы совершенно правы, и я уже решил проблему.
4. Это очень близко к тому, что мне нужно! Однако я хочу, чтобы края поля:after image совпадали с div, под которым оно находится. Прямо сейчас верхнее поле всегда имеет дополнительную ширину по бокам. Я поиграл с заполнением, но, похоже, это только все испортило. Есть ли какой-либо способ, которым я могу это сделать?
5. @ellenchristine: Вы пытались изменить
left/rightсвойства на0? Вот так: jsfiddle.net/thirtydot/ChJnr/7
Ответ №2:
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.
Ответ №3:
.someClass {
backgroung-image: url('path-to-image-form-css-file');
height: 100px;
width: 100px;
padding: ...
}
Комментарии:
1. Единственное, что мне нужно, чтобы поля имели переменную высоту.
2. $(‘.SomeClass’).css(‘height’,anyCorrectValue);
Ответ №4:
Разделите его на 3 раздела — один, чтобы содержать весь «оригинальный» div, один div, который перемещается в нижнюю часть контейнера div для хранения нижнего изображения, и один, чтобы содержать все остальное.
Комментарии:
1. Ого. Это единственный способ заставить это работать? Есть ли какой-нибудь способ вытеснить фоновое изображение за пределы самого изображения? Я знаю, что кажется, что это явно не сработает, но я думал, что с отрицательными полями или чем-то еще это могло бы сработать.
2. Если вы еще не используете свойства заполнения и границы div каким-либо значимым образом и в зависимости от контекста div на странице, вы могли бы сделать это с помощью свойства background-origin: w3schools.com/cssref/css3_pr_background-origin.asp
3. Более конкретно, установите для background-origin значение border-box вместо content-box и сохраните все остальное внутри поля content… Не уверен, что это работает для вашего конкретного случая без какого-либо другого кода для контекста.
Ответ №5:
Лично я бы создал подобный класс. Это предположение, но я считаю, что это должно сработать нормально:
.someClass {
background: #FFF url('path') no-repeat center bottom;
width: 175px;
}