Взяв под свой контроль изображения Роловерс

На большинстве веб-браузеров, есть по умолчанию, которое окружает границе изображения, которые используются как ссылки. Обычно это большая, злая, толстый яркий голубой каемкой. Это, вероятно, нежелательно, поэтому в этой статье мы будем искать пути вы можете позаботиться об этом в вашем CSS ...

Чтобы удалить границу по умолчанию использовать это в вашем CSS:


a img { border: none; }


Вы также можете удалить по умолчанию на границе изображения, связанного в том числе "BORDER = 0" внутри тега изображения, но это устаревшее имущество и не рекомендуется. К сожалению, он включен во многие копирования и вставки примеров кода поскольку она заставляет желаемых результатов без того, чтобы рассчитывать на владельца сайта поддержанию хороших CSS.

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

Лучший способ узнать, этих примеров является Посмотреть пример страницу и лучший способ понять, как они работают, к примеру скачать и посмотреть на этот код самостоятельно.

Пример 1: Толстый Пограничная

Этот пример дает изображение несколько пикселей обивка и границ в нормальном государстве, и добавляет цвет фона на опрокидывание.

Пример 2: Пунктирная Толстая Пограничная

Это аналогичная техника только добавляет опрокидывание толстой пунктирной линии границы на изображение. Хитрость тут в том, что граница есть в нормальном государстве, а только его белый как цвет фона. Если эта граница не было в его нормальном состоянии и был добавлен во время опрокидывания, изображения приведет к изменению позиции, чтобы освободить место на границе, которая была бы сотрясение и нежелательному результату.

Пример 3: Черное & белого на цветное

Этот метод вызывает изображение на "раскрасить" на опрокидывание. Это немного более сложным, что вы не сможете использовать регулярные IMG тегов в HTML. Вы будете использовать якорь элементы с уникальным именем класса. Такие "якоря" будет иметь конкретную высоту и ширину и фоновое изображение. Тогда на опрокидывание, вы можете поменять фоновое изображение для цветной версии.

Пример 4: Добавить градиент Справочная

Вместо добавления сплошным цветом, как в примере 1, можно использовать изображения. Просто дайте изображение Некоторые обивка по обе стороны так что некоторые возможности для графического появляются.

Пример 5: показать информацию

Этот метод делает тексте появляются под изображением на опрокидывание. Это делает использование фонового изображения собственности в CSS, как в примере 3, но в данном случае, фон изображения остается прежним. Разница заключается в том, что в настоящее государство, текст будет изгнан за пределы экрана с огромным негативным смещение, которое удаляется от опрокидывания. Чтобы получить текст отображается под изображением вместо того, чтобы на нем дать якорь Top набивки немного больше, чем высота изображения.