Как установить положение фона на абсолютное расстояние, начиная справа?
Я хочу установить фоновое изображение для div таким образом, чтобы оно находилось в верхнем ВЕРНО div, но с фиксированным расстоянием 10px сверху и справа.
Вот как я бы сделал это, если бы захотел, чтобы это было в верхнем ОСТАВИЛИ div:
background: url(images/img06.gif) no-repeat 10px 10px;
Есть ли способ добиться того же результата, но с отображением фона на верхнем ВЕРНО?
Ответы 8
Я не знаю, возможно ли это в чистом CSS, поэтому вы можете попробовать
background: url(images/img06.gif) no-repeat top right;
и измените свое изображение, чтобы включить границу 10 пикселей сверху и справа в прозрачном цвете.
Есть несколько способов сделать это.
Если возможно, посчитайте сами. Вы уже знаете размеры своего изображения. Если вы знаете размеры div, вы можете просто поместить изображение в (ширина div - ширина изображения - 10, высота div - высота изображения - 10).
Используйте Javascript, чтобы сделать за вас тяжелую работу. Практически тот же метод, что и выше, за исключением того, что вам не нужно знать размеры самого div. Javascript может вам сказать.
Более хакерским способом было бы поместить прозрачную рамку 10 пикселей вокруг верхнего и правого края изображения и установить положение
top right.
Хак, который обходится с другими хаками, все равно остается хаком;)
Одно из решений - полностью разместить пустой div и дать ему фон. Я не верю, что есть способ сделать это исключительно с помощью CSS, без изменений изображения и без дополнительной разметки в гибком макете.
Используйте ранее упомянутое правило вместе с верхним и правым полями:
background: url(images/img06.gif) no-repeat top right;
margin-top: 10px;
margin-right: 10px;
Фоновые изображения отображаются только внутри отступов, но не на полях. Если добавление поля не является вариантом, вам, возможно, придется прибегнуть к другому div, хотя я бы рекомендовал вам использовать его только в крайнем случае, чтобы попытаться сохранить разметку как можно более скудной и сегментарной.
Это хорошее решение, но, поскольку я хотел отобразить границу, потребовалось бы обернуть еще один несемантический div. В итоге я использовал тег <img> вместо фона css, и в конце концов это хорошо сработало для меня.
В моем случае я обнаружил, что padding-top и padding-right были решением для размещения небольшого значка после диапазона.
Это может сработать, но имеет другие побочные эффекты. Цвет фона не будет охватывать весь элемент, и вы не сможете иметь текст в элементе, который заполняет последние 10 пикселей.
Вы можете использовать проценты:
background: url(...) top 98% no-repeat;
Если вы знаете ширину родительского div, будет довольно легко определить, какой процент вам нужно использовать.
Я был удивлен, узнав, что 100% - это то же самое, что «right» для background-image, однако, если ширина родительского div фиксирована, то точнее напрямую использовать пиксельное смещение.
без процентов не получится, если у вас разная ширина предметов
Правильный формат:
background: url(YourUrl) 0px -50px no-repeat;
Где 0px - это горизонтальное положение, а -50px - вертикальное положение.
CSS background-position принимает отрицательные значения.
Во всех современных браузерах и IE вплоть до версии 9 вы можете использовать четырехзначный синтаксис указано в CSS3:
background-position: right 10px top 10px;
Источник: MDN
Это гораздо более полезное решение, чем игра с полями.
Это лучшее решение, чем отмеченное зеленой галочкой.
Вы можете имитировать пространство с правой стороны с помощью границы в пикселях (большую часть времени белой или, может быть, что-то еще)
background-image: url(../images/calender.svg) center right
border-right: 5px white solid
Прозрачная рамка не такая уж хакерская! Без лишней разметки, без проблем с границами и т. д.