КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Background-position 1 страница
|
|
|
|
Задает позиционирование фонового изображения. С помощью этого атрибута можно смещать фоновое изображение относительно левого верхнего угла элемента. Свойство имеет два параметра: первый определяет смещение по вертикали, второй - смещение по горизонтали.
В качестве значений можно указывать длину как положительную, так и отрицательную. Например, правило:
P {
background-image: url(img/bg.gif);
background-position: -12px 50px}
смещает фоновое изображение на 12 пикселов влево и на 50 пикселов вниз от левого верхнего угла элемента P. Кроме того, можно указывать процентные соотношения. Проценты вычисляются относительно ширины и высоты блока элемента. Например, правило:
P {
background-position: 20% 40%}
смещает фоновое изображение на 20% вправо и на 40% вниз от левого верхнего угла блока элемента P. Значением по умолчанию является 0% 0%, что соответствует верхнему левому углу. Кроме того, можно вместо численных значений указывать выравнивание относительно элемента. Так для выравнивания по вертикали можно использовать три ключевых слова:
- top: выравнивание по верхнему краю;
- center: выравнивание по центру;
- bottom: выравнивание по нижнему краю.
Для выравнивания по горизонтали можно использовать ключевые слова:
- left: выравнивание по правому краю;
- center: выравнивание по центру;
- right: выравнивание по правому краю.
Таким образом, правило:
P {
background-position: 0% 0%}
эквивалентно правилу:
P {
background-position: top left}
В HTML нет атрибута, который бы соответствовал данному свойству, а значение по умолчания для фона, заданного средствами HTML, совпадает со значением по умолчания для фона, заданного с помощью CSS и составляет 0% 0%.
P {
background-image: url(img/bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center}
...
Текст на фоновом неповторяющемся и неподвижном рисунке, который отцентрирован по горизонтали
|
|
|
Теория работы с фоном на этом практически исчерпывается. По крайней мере, никаких существенных моментов я не упустил. Впереди незабываемая и неизбежная встреча с прикладным применением.
По материалам сайта: http://karman.com.ua/
Если изображение, которое Вы обрабатываете имеет большее разрешение, то в диалоговом окне, открывшемся после выбора указанного выше пункта меню, следует снять галочку напротив Resample Image, иначе будут потеряны пиксели, и установить разрешение 72 dpi. В случае изменения размеров изображение лучше установить режим соблюдения пропорций (Constrain Proportions) и внести в поле, которое по Вашему наиболее важное (высота или ширина), требуемую величину. Вторая величина будет рассчитана самой программой. Сканируете ли Вы изображение или видоизменяете какое-то готовое, пользуйтесь следующим правилом: правьте изображение с размерами в 2-3 раза превышающими тот, который Вы планируете разместить на страничке. После выполнения всех операций уменьшайте размер до требуемого с установленной галочкой в пункте Resample Image (Bicubic стоит по умолчанию, его менять не стоит).
Для сохранения изображения с учетом оптимального выбора размеров файла и качества, командой Save for Web (Сохранить для Web) из пункта горизонтального меню File (Файл) вызовите диалоговое окно Web-оптимизации. Выберите тип файла GIF или JPG. Программа сама Вам предложит варианты, где Вы сможете видеть как качество изображения, так и его размер.
В случае выбора GIF, можно задавать количество цветов. Изменяя параметры GIF, можно контролировать сглаживание (dither) и выбирать новые цвета, что позволяет получать интересные эффекты с цветовыми переходами. Можно выбрать какой-нибудь из предустановленных вариантов GIF с большим количеством цветов (к примеру 32), установить сглаживание и сократить количество цветов до четырех.
По материалам сайта: http://web-brodilka.ru/
Атрибуты тега <IMG>. Атрибут SRC отвечает за указание адреса файла. Но кроме него,существуют ряд других атрибутов, отвечающих за нюансы размещения (подпись рисунка, способ выравнивания и так далее). Атрибут ALIGN служит для установления способа выравнивания картинки (значения left и right, top, middle, bottom) С помощью ALTдобавляется комментарий, отображаемый во время отключения показа графики в веб-браузере. HTML-код: ALT="комментарий". BORDER- толщина рамки вокруг изображения. LOWSCR - альтернативное изображение. Если пользователь по техническим причинам не может просмотреть полноцветное изображение высокого разрешения, использование LOWSCR позволяет указать адрес альтернативного изображения, меньшего размера и разрешения. Атрибут пользуется популярностью у веб-мастеров, так как позволяет оптимизировать страницу для просмотра на мобильных устройствах, изначально обладающих меньшими ресурсами чем стационарный компьютер. WIDTH и HEIGHT - высота и ширина изображения. В завершении статьи несколько полезных советов:
Этот баннер сделан на скорую руку в качестве примера. Допустим я хочу, чтобы при нажатии на этот баннер он привел меня на мою страничку www.allcgi.h1.ru Нет проблем, запишем следующий код. Комментировать его я не буду так как все ньюансы мы с Вами уже рассмотрели. Допустим, файл графического изображения, которое Вы видите выше, называется banner.gif
<a href=http://www.allcgi.h1.ru> <img src=ban.gif border=0 alt=" Приведу Вас на страничку www.allcgi.h1.ru"></a> В случае, если гиперссылкой является изображение, оно, как правило, отображается в рамке (border). Если Вы не хотите отображать рамку, то записываете border=0. Наведите курсор мыши на баннер, увидели всплывающую подсказку?
А теперь попробует сами сконструировать баннер. Это не столь уж сложно. В программах Paint Brush или PhotoShop (который я всем рекомендую), создаете несколько файлов (2-3, для начала больше не нужно). Главное, чтобы Вы не забыли сохранить эти файлы в формате GIF и чтобы все они были одного размера (скажем 100x100 пикселей). Это кадры Вашего будущего микрофильма, Вашего первого баннера.
Далее Вам на помощь приходит программа Microsoft Gif Animator. Это достаточно простенькая програмка, но в то же самое время позволяющая делать вполне профессиональные баннеры. Немного терпения и сноровки, приходящей с опытом, и баннерокреаторство у Вас в кармане.
Скачать программу и получить несколько ценных советов о том, как с ней работать, Вы можете на страничке http://webcentre.narod.ru/gifanim.html
По материалам сайта: http://web-brodilka.ru/