Я знаю, как установить фон в DIV, как:Установка фонового изображения в DIV, параметры позиции
background: url(/images/image.gif) no-repeat top right;
Иногда мне нужно более мелкозернистого контроль, другие, чем, скажем, верхний центр или снизу.
Я видел людей, использующих 'em' в разделе позиции, что это такое?
See the MDN reference for background-position. Вместо общих условий вы также можете использовать проценты или другие единицы измерения CSS для установки смещения x или y. em - это единица, которая ссылается на размер шрифта для текущего элемента, но вы также можете использовать px для смещения пикселей.
Имейте в виду, что em является ОТНОСИТЕЛЬНЫМ размером - так что 1em относится к моему контейнеру и НЕ соответствует фактическому размеру. A 1, это 1em, основанный на моих браузерах по умолчанию.
Таким образом, родительский (скажем, .parent) класс с 1em и дочерний с 0.75em будет .75 родительского. У внука этого родителя с 0.5em будет 0.5em из 0.75, или приблизительно 0.375 оригинала 1em, а не 0.5 этого оригинала.
Я не использую .px - легче начать, но когда вам нужно все изменить, вам нужно изменить его повсюду, поэтому, если вы измените 1em на 1.25em, он также изменит значение child и внук вложен в них.
для конкретного примера, если я положил верхний край: 0.5em; в CSS, я говорю, чтобы поставить половину высоты моего текущего шрифта в качестве верхнего поля.
.px - пиксели, которые изменяются в зависимости от настроек монитора и имеют происхождение в разрешении экрана. .pt - это точка, что означает, что на напечатанной странице точка 72 составляет примерно 1 дюйм - она имеет источник в печатном материале. % имеет происхождение в нуле, процент, и мне становится сложнее управлять долгосрочными. em имеет происхождение в разметке.
Большинство браузеров имеют 12pt (point) шрифт в качестве базы (если я правильно помню), что составляет 1em, а это - неизвестное количество пикселей. ТАК, от манжеты, если я помню .625em составляет около 10pt, поэтому, если я установил тело на .625em, то мой .5em ниже этого размера 5 точек, 2em ниже тела будет 20 пунктов и так далее.
EDIT: мои математические укусы в конце дня :), так что 10/12 - 0,8333 - так что нам нужно .8333 не 0,625, но вы получите эту идею.
Градиенты можно управлять с помощью
background:#fff url(images/vertical_sliced_image.gif) repeat-y;
или
background:#fff url(images/horizontal_sliced_image.gif) repeat-x;
Вы можете нарезать 1px высоту или ширину 1px (градиентное изображение) и повторить его в фоновом режиме по горизонтали или по вертикали ...
надеюсь, что это поможет
В настоящее время отключена ссылка. – Kzqai
@Kzqai: хорошо поймать! Обновлено, чтобы указать на MDN, так как в любом случае это более основательно. Для справок в будущем это прекрасный пример того, почему мы разрешаем редактирование сообщества: когда вы видите неработающую ссылку, а не ожидаете, что автор сохранит свой трехлетний ответ, обновленный (к сожалению, сеть более хрупкая, чем мы 'd like), не стесняйтесь обновлять ссылку самостоятельно.В конце концов, голосование является вторичным инструментом в нашей панели инструментов контроля качества; он действует для того, чтобы сделать этот ресурс лучшим, каким он может быть, и редактирование является более продуктивным инструментом здесь. – Matchu
Возможно, я сделал это, но я не собирался исправлять сломанную ссылку w3schools. http://w3fools.com – Kzqai