Връщайки се към темата за прехвърляния. Искам да покажа най-простите примери. Позволете ми да ви напомня, че отнемането в оформлението се нарича картина, която се променя, когато мишката върху него с показалеца на мишката. За работата на този ефект е необходимо да се използва добре познат имот, наречени връзки се носят. И какво, ако ние, например, трябва да направите само самата картина под формата на линкове, но без никакъв текст. Така например, на логото. Има красива картина, а ние не се нуждаят от нея на върха на наслагване на текстови линкове. И не "празен" валидатор не позволява връзката.
За да се реши този проблем, можете да използвате имот текст, наречен текст тире. който обикновено се използва за "червена линия". Но го попитам отрицателна стойност и достатъчно голям. Тогава текстът ще бъде скрит зад ъгъла на страницата на сайта. По този начин, те идват доста често, особено при използване на ръчно рисувани лога.
Но нека се върнем към нашите овце, тоест преобръщане. Принципът на работа на такава промяна на изображение е доста проста: двойният образ е съставен един точно под другия:
Както се вижда от фигурата, общата височина на изображението трябва да бъде дори и да направи сумата от височини на двете изображения: 256 + 256 = 512.
Освен това, във файла за стил ние питаме класа за справка в бъдеще, което по същество ще изпълнява ролята на преобръщане. Има няколко hotrostey. На първо място, този клас се определя не само от гледна точка отпред, и се дължи директно на маркера, както и:
На второ място, ние използваме на снимката не е пряко (или чрез IMG таг), но само като фон. Но! Тъй като ние имаме една обща картина, първо трябва по някакъв начин да се покаже, че не е като цяло, но само в горната част. За този клас на гореизложеното ние определяме следния набор от правила:
a.picture фон: URL (santa.gif) не-повторение 0 0;
ширина: 256px;
височина: 256px;
езика: блок;
текст-тире: -1000em;
>
Както можете да видите, като фон, са регистрирани на името на изображението е, без повторение, но с координатите 0 0. Това е просто най-доброто място и казват на браузъра какво да покаже на снимката ви трябва, като се започне с неговия горен ляв ъгъл. Но за колко време? Но само за да 256px ширина и на същата височина. И нищо повече. В допълнение към всичко това работи добре, е необходимо да се предпише дисплея на правило картиране: блок;
Текстът, както вече казах, ние трябва да се скрие. Така че ние добави правило: текст тире: -1000em; Тази стойност е повече от достатъчно, дори и ако имате монитор с диагонал 5 метра.
Но това е само половината от историята. Как да се покаже втората част на картината? За да направите това, добавете следния много кратък набор от правила:
a.picture: навъртам фон: URL (santa.gif) не-повторение 0 -256px;
>
Voila! Всичко просто като 2x2. Използването на всички една и съща снимка като фон, ние трябва да се променят свойствата на висене координати на чертежа. В ширина като нула, така че той остава, но сме си поставили височината на отрицателна стойност на точно половината на снимката. По този начин, ние като че ли са скрити му горни и долни показа. Това е всичко.
Жив пример може да се види тук
Свързани статии