Расположение фонового изображения, добавление отступов

Question

Я хотел бы добавить фон в div, расположить его по центру, но !, добавив немного отступа к изображению. У div есть отступы для текста, поэтому я хочу немного сделать отступ для фона. вероятно, имеет больше смысла в примере

http://jsbin.com/umuvud/edit#javascript,html,live

Спасибо!

Answer 1

Обновленный ответ:

Несколько раз было отмечено, что это неправильный ответ на этот вопрос, и я согласен. Когда был написан этот ответ, IE 9 все еще был новым (около 8 месяцев), и многим разработчикам, включая меня, требовалось решение для <= IE 9. IE 9 - это когда IE <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin#Browser_compatibility" rel="noreferrer"> начал поддерживать background-origin. Тем не менее, прошло более шести с половиной лет, поэтому вот обновленное решение, которое я настоятельно рекомендую использовать с реальной границей. В случае

#hello {
  padding-right: 10px;
  background-color:green;
  background: url("https://placehold.it/15/5C5/FFF") no-repeat scroll right center #e8e8e8;
  background-origin: content-box;
}

<p id="hello">I want the background icon to have padding to it too!I want the background icon twant the background icon to have padding to it too!I want the background icon to have padding to it too!I want the background icon to have padding to it too!</p>

Оригинальный ответ:

Вы можете подделать его с рамкой в ​​10 пикселей того же цвета, что и фон:

http://jsbin.com/eparad/edit#javascript,html,live

#hello {
   border: 10px solid #e8e8e8;
   background-color: green;
   background: url("http://www.costascuisine.com/images/buttons/collapseIcon.gif")
               no-repeat scroll right center #e8e8e8;
}

Answer 2

это на самом деле довольно легко сделать. Вы почти там, делаете то, что сделали с background-position: right center;. То, что действительно нужно в этом случае, очень похоже на это. Давайте преобразуем их в проценты. Мы знаем, что center = 50%, так что это достаточно просто. Теперь, чтобы получить требуемый отступ, вам нужно расположить фон следующим образом: background-position: 99% 50%.

Второй и более эффективный способ - использовать ту же самую идею background-position и просто использовать background-position: 400px (width of parent) 50%;. Конечно, этот метод требует статической ширины, но каждый раз будет давать вам одно и то же.

Метод 1 (99% 50%)
Метод 2 (400px 50%)

Answer 3

Существует собственное решение для этого, использующее четыре значения для background-position

.CssClass {background-position: right 10px top 20px;}

Это означает 10 пикселей справа и 20 пикселей отТоп.Вы также можете использовать три значения четвертое значение будет считаться как 0.

Answer 4

вы можете использовать background-origin: padding-box; и затем добавьте некоторые отступы, где вы хотите, например: #logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;} Таким образом, вы прикрепляете изображение к блоку отступов div, в котором оно находится, чтобы вы могли расположить его где угодно.

Answer 5

Если кому-то еще нужно добавить отступы к чему-либо с background-image и background-size: содержат или cover , я использовал следующее:хороший способ сделать это.Вы можете заменить border-width на 10% или 2vw или как угодно.

.bg-image {
    background: url("/image/logo.png") no-repeat center #ffffff / contain;
    border: inset 10px transparent;
    box-sizing: border-box;
}

Это означает, что вам не нужно определять ширину.

Answer 6

Чтобы добавить пробел перед фоновым изображением, можно определить «ширину» элемента, использующего объект «фоновое изображение». А затем определить значение пикселя в свойстве background-position, чтобы создать пространство слева.

Например, я бы предложил сценарий, в котором я получил навигационное меню с маркером перед элементом ссылки и графиком маркера, который можно было изменить, если соответствующая ссылка переходит в активное состояние. Кроме того, активная ссылка также имела фоновый цвет для отображения, и этот фоновый цвет имел приблизительно 15-пиксельный отступ как слева, так и справа от элемента ссылки (поэтому слева он также включает значок маркера ссылки).

Хотя padding-right выполняет задачу, чтобы фоновый цвет растянулся на 15 пикселей больше справа от текста ссылки. Отступ слева только добавляет пробел между текстом ссылки и маркером.

Итак, я взял ширину объекта цвета фона из дизайна PSD (например, 82px) и добавил его к элементу li (в классе, созданном для отображения активного состояния), а затем я установил значение background-position в 20px. В результате значок пули сместился внутрь от левого края. И это дало мне желаемый результат, если оставить отступ перед тем, как значок маркера используется в качестве фонового изображения.

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

Answer 7

Прежде всего, чтобы быть немного подонком, лучше НЕ использовать просто тег <background>.скорее, используйте правильный, более конкретный тег <background-image>.

единственный способ, которым я знаю, чтобы сделать такую ​​вещь, это встроить заполнение в изображение путем расширенияматовыйпоскольку пустые пиксели не удаляются, у вас есть отступы.поэтому, если вам нужна граница 10px, создайте 10px пустых пикселей вокруг изображения.Это очень просто в Photoshop, Fireworks, GIMP и т. д.

Я бы также рекомендовал попробовать формат PNG8 вместо умирающего GIF ... намного лучше.

Там может быть альтернативное решение вашей проблемы, если бы мы знали немного больше о том, как вы ее используете.:) это выглядит, как будто вы пытаетесь добавить кнопку аккордеона.лучше всего поместить его в HTML, потому что тогда вы можете настроить таргетинг на него с помощью JavaScript / PHP;то, что вы не можете сделать, если это на заднем плане (по крайней мере, не просто).в таком случае вы можете стилизовать черт из изображения, которое вы в настоящее время имеете в CSS, используя следующее:

#hello img { padding: 10px; }

WR!