Как изменить размер фоновой картинки через CSS3
В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size , с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.
Абсолютное изменение размера
Могут применяться единицы измерения.
По умолчанию ширина и высота установлена как auto , что оставляет исходные размеры изображения.
Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:
Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:
Данный код масштабирует изображение с 200×200 до 100×100 пикселов.
Относительное изменение размера через проценты
Если применяются проценты, размеры основываются на элементе, а НЕ изображении:
Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.
Использование процентов может быть полезно для адаптивного дизайна. Поменяйте ширину демонстрационной страницы чтобы понять, как изменяются размеры.
Масштабирование до максимального размера
Свойство background-size также понимает ключевое слово contain . Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:
Заполнение фоном
Свойство background-size также понимает ключевое слово cover . Изображение будет масштабироваться так, чтобы заполнить весь контейнер, но если различаются соотношения сторон, то картинка будет обрезана.
Масштабирование нескольких фонов
Несколько фонов могут быть масштабированы с помощью списка значений, разделенных запятыми, идущих в том же порядке.
Работа в браузерах
Последние версии всех браузеров поддерживают background-size без префиксов.
IE8 и ниже не поддерживают это свойство. Вы можете использовать фильтр IE для эмуляции значений content и cover, но невозможно изменить размер фоновой картинки без помощи уловок, вроде добавления настоящей картинки позади других элементов. Это грязно, так что я рекомендую изящную деградацию.
Как изменить размер фонового изображения с помощью CSS3
Размер фонового изображения может быть изменен и масштабирован. В CSS2.1 фоновые изображения, применяемые к контейнеру, сохраняют свои фиксированные размеры. К счастью CSS3 ввел свойство background-size, которое позволяет растянуть или сжать фон. Оно идеально подходит, если вы используете методы адаптивного веб-дизайна для создания шаблонов.
Здесь можете найти разные методы:
Абсолютное изменение размера¶
Когда мы устанавливаем фоновое изображение, ширина и высота изображения по умолчанию устанавливаются в «auto», которое сохраняет оригинальный размер изображения. А если необходимо изменить размер изображения, могут быть использованы абсолютные измерения для установления нового размера (px, em, cm и др).
Измерения высоты могут быть применены, используя свойство background-size с абсолютным измерением.
Давайте рассмотрим пример фонового изображения с измененным размером:
Пример¶
Относительное изменение размера с помощью процентов¶
Использование процентных значений может быть довольно полезным при адаптивном дизайне. Когда используется процентное значение, размеры основываются на элементе, а не изображении. Если свойство background-size установлено как «100% 100%», фоновое изображение будет растянуто таким образом, чтобы оно заполняло всю область контента.
Пример¶
Максимальное масштабирование размера¶
Когда свойство background-size установлено в значение «contain», фоновое изображение будет масштабировано таким образом, чтобы оно заполняло область контента. Но пропорции изображения (отношение высоты и ширины) будут сохранены.
Значение «contain» указывает, что фоновое изображение будет масштабировано независимо от размера контейнера таким образом, что каждая сторона была максимально больше, не переходя длину контейнера с соответствующей стороны.
Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но размеры контейнера не могут быть больше ширины и высоты.
Пример¶
Заполнение фоном¶
Когда свойство background-size установлено в значение «cover», фоновое изображение будет масштабировано таким образом, чтобы оно заполняло всю область контента. Изображение будет масштабировано, чтобы заполнить контентную область, но оно будет обрезано, если соотношения сторон различаются.
Пример¶
Установление разных фонов для разных устройств¶
Огромное фото на большом экране будет смотреться идеально, но на экране маленького устройства оно не будет таким эффектным. Тогда зачем загрузить большое фото, если вы все равно должны уменьшить его?
Можно использовать мультимедийные запросы для отображения разных изображений на разных устройствах.
Здесь используется правило @media. В данном примере можно увидеть одно большое изображение и другое поменьше. Они установлены так, чтобы быть отображены по-разному на разных устройствах. Вы увидите результат сами если измените ширину браузера.
Масштабирование изображений в CSS
Одной из замечательных возможностей, которую нам добавили в CSS3 — является масштабирование изображений. Благодаря ей мы можем манипулировать изображением, как нам это будет нужно. CSS свойство, которое отвечает за масштабирование изображений, называется background-size. Данное свойство хорошо тем, что мы можем самостоятельно задавать нужный нам размер изображения, и можем использовать уже встроенные значения свойства. Начнем разбирать, какие значения мы можем использовать. Первое — это самостоятельно задавать размер изображения. Можно задавать различные единицы измерения, а какие — на Ваше усмотрение. Важно помнить, что при этом мы указываем два параметра без запятой, первый отвечает за ширину изображения, второй за высоту изображения. Если установить одно значение, то второе будет подобрано автоматически, с сохранением пропорций изображения. Осталось разобрать только значения, которые встроены в свойство background-size. Значение cover, означает, что изображение будет масштабировано таким образом, что его ширина и высота, будут равны ширине и высоте блока, в котором оно находится. Второе значение contain, означает, что изображение будет масштабировано в блоке с сохранением пропорций, которые браузер подберет самостоятельно. Осталось лишь рассмотреть пример использования свойства background-size:
После чего мы получим следующее:
Мы создали пустой блок, которому задали ширину и высоту, а также установили картинку, изначальная ширина которой равна 320 пикселей, а высота равна 240 пикселей, и применили значение cover, для свойства background-size. Благодаря этому значению, изображение стало шириной как блок, в котором оно находится, а именно 700 и 300 пикселей соответственно. Это лишь один пример использования данного свойства, однако советую вам протестировать все остальное, что я указывал выше. Если вы разберетесь в данном свойстве, оно Вам обязательно пригодится в дальнейшей работе. До скорого!
5 последних свежих статей:
Методы alert, prompt, confirm в JavaScript
И снова я приветствую Вас в очередной теме посвященной языку JavaScript, в которой мы разберем методы alert, prompt, confrim.
Конструкция switch-case в JavaScript
Всем привет, сегодня мы рассмотрим с Вами конструкцию switch-case в языке JavaScript.
Всплывающая подсказка на CSS
Здравствуйте дорогие друзья, сегодня мы с Вами изучим еще одну тему посвященную языку CSS. И научимся реализовывать всплывающие подсказки на CSS.
Псевдокласс target в CSS
Сегодня мы рассмотрим еще одну возможность, которую предоставляет нам CSS3, а именно поговорим о псевдоклассе target, для чего он нам может быть нужен, и рассмотрим один из самых популярных способов его применения.
Как вставить видео с YouTube
Довольно часто Вы видите на различных ресурсах видео, которое хранится на сервисе youtube, но каким-то образом его можно воспроизвести на данном сайте. Об этом сегодня пойдет речь, и я расскажу Вам, как вставить видео с YouTube.
Как изменить размер фонового изображения с помощью CSS / JS
У меня есть полноэкранный веб-сайт background-image: no-repeat и background-size: cover стиль на нем. Я хочу сделать анимацию, что фоновое изображение изменит размер в 10 секунд с правой стороны страницы на 350px ширину и 175px высоту. Это возможно?
Я видел некоторую анимацию webkit, но была проблема со background-size: cover стилем, поэтому анимация не работает.
Но он мгновенно изменит размер изображения и переместит его вправо, я хочу изменить их линейность.
Большое спасибо, ребята! ��
Ответов: 2
Вы можете добавить что-то подобное к вашему css:
Проблема с этим, однако, заключается в том, что он не будет анимировать размер.
Я бы предположил, что вы не устанавливаете изображение в качестве фона. Вместо этого расположите изображение позади всех остальных элементов, используя свойства position и z-index. После установки вы можете добавить анимацию. Более подробную информацию об использовании атрибутов z-index и position см. В приведенной ниже ссылке и пример «попробуйте сами»:
Похожие публикации:
- Как сделать обтекание текста в html
- Как сделать полупрозрачный фон в css
- Как сделать резервную копию whatsapp
- Как сделать страницу 404 для сайта html
Как динамически менять размер картинок?
В div для хранения картинок прописаны картинки таким образом:
Таких картинок в div много. Все они разного размера и могут перетаскиваться в другой div . Как можно сделать их одного размера, пока они находяться в div для хранения, а когда их перетаскивают в другой div , чтобы они принимали свой настоящий размер. Код будет таким
Закладки на чистом CSS .tabs < position: relative; min-height: 200px; /* This part sucks */ clear: both; margin: 25px 0; >.tab < float: left; >.tab label < background: #eee; padding: 10px; border: 1px solid #ccc; margin-left: -1px; position: relative; left: 1px; >.tab [type=radio] < display: none; >.content < position: absolute; top: 28px; left: 0; background: white; right: 0; bottom: 0; padding: 20px; border: 1px solid #ccc; overflow: hidden; >.content > * < opacity: 0; -webkit-transform: translate3d(0, 0, 0); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; >[type=radio]:checked ~ label < background: white; border-bottom: 1px solid white; z-index: 2; >[type=radio]:checked ~ label ~ .content < z-index: 1; >[type=radio]:checked ~ label ~ .content > * Содержание закладки №1
Содержание закладки №3
Как плавно изменить background в css через js
в папке backgrounds находится 3 файлa .jpg (back1.jpg, back2.jpg и back3.jpg) Нужно с помощью Js сделать так, чтоб элемент с фоном изменял фон на следующий из папки backgrounds каждые 10 секунд, плюс возникла необходимость делать это плавно.
var intervalID = window.setInterval(setBack, 10000); var i = 1 var files = 3 var file_url = '' function setBack() < file_url = "background: url(backgrounds/back", i, ".jpg);" document.write(file_url); document.getElementsByClassName('background')[0].style = file_url i ++ if (i >files) < i = 0 >>
первая проблема, не нахожу информации на счет того как вставлять номер файла в текст. Да и к тому же нужно придумать как сделать плавный переход между картинками через размытие. потому что в таком расположении они сменяются резко. что сильно режет глаз
Как сделать меняющиеся изображения в html
Kristobal Hunta, поставте скрипт после картинок
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
Прошу прощения, учту на будущее. Так вот:
Без оператора if (подсвеченный) глюк с заминкой исчезает, но вместе с плавными переходами , возможно ошибка в условии?
и ХТМЛ
Kristobal Hunta,
пауза возникает потому что первый раз смена сработает через 5 сек.
Вариант смены сразу.
А подскажите, пожалуйста. как сделать так, чтобы при загрузке страницы первое действие было не смена картинки, а стояло бы первое изображение , которое заданное время не менялось?
Почему скорость смены картинки зависит от её разрешения? как можно модернизировать смену картинок, чтобы изображения на весь экран менялись достаточно быстро?
Доброго времени суток! Ув. можете подсказать как использовать этот же скрипт для 2 наборов картинок в пределах одной страницы. У меня не получилось, при разных id картинок код работает только для одного набора.Можно ли его каким-либо образом «экранировать » для работы только в пределах одного
Многие из Вас, не зная возможностей CSS3, используют JQuery для действий над изображениями.
Сегодня с познакомлю Вас с возможностями CSS3.
Простейший пример. Грубая смена изображений.
Для смены мы будем использовать фоновое изображение.
Плавная смена изображений
Рассмотрим более интересный вариант, плавную смену изображений, за счет абсолютного позиционирования элементов (position:absolute).
Меняя время «1s», в свойстве transition, можно управлять скоростью смены изображений.
Свойство Transform
Добавим к предыдущему варианту свойство transform. Как уже понятно из имени свойства, будет происходить трансформация изображения.
Ротация изображений
А теперь поиграем с ротацией изображения. Изменим css-код из 2 примера на:
Слайдер изображений
Попробуем сделать простейший слайдер. Он будет основан на смене свойства margin
Принцип я думаю вам понятен. Если с фантазией все хорошо, поигравшись этими свойствами можно получить очень интересные результаты 😉
Большое спасибо за вашу помощь и внимательность к нам!
Проводя различные тесты, доказано, что простая ссылка не так заметна посетителям сайта, как ссылка-картинка, которая при наведении меняется на другую картинку, тем самым привлекая пользователя и толкая его на нее нажать.
Скрипт по смене картинки при наведении курсора, будет реализован на css и html, совершено простым образом, без всяких применений javascript. Для этого нам нужно, две картинки как Вы уже поняли, одна активная, а другая пассивная. При наведении на картинку, она меняется на другую, принцип действий очень прост и понятен.
Далее нам потребуются два файла index.php и style.php.
Первая часть. HTML.
В нем мы просто прописываем ссылочку с классом images.
Вторая часть. CSS.
В классе a.images, прописываем путь к пассивной картинке, указываем ее как блочный элемент, устанавливаем ширину и высоту картинки. В классе a.images:hover мы только прописываем путь к активной картинке.
Думаю данный урок даст широкий спектр возможностей и применений, ведь данная технология по применению смены картинки при наведении курсора очень проста в реализации. Плюсы: скрипт простой и использует только css и html. Минусы: любая картинка имеет свой вес, а также ее нужно будет создавать в графической программе. Большое спасибо Вам за внимание и проявленный интерес к данному уроку!
Этот урок посвящен теме как вставить картинку в HTML и какие стили CSS наиболее часто применяются для изображений. Здесь мы рассмотрим все основные вопросы касаемо вставки и отображения картинки в веб-документе. А также рассмотрим причины почему у некоторых пользователей не отображается картинка в HTML.
Как вставить картинку в HTML
В HTML изображения в графическом формате (GIF, JPEG, PNG, APNG, SVG, BMP, ICO) добавляются на веб-страницу с помощью тега через атрибут src, в котором указывается адрес картинки. То есть атрибут src является обязательным для элемента . Без него этот тег не используют.
Ещё одним обязательным атрибутом элемента является alt. Этот атрибут используют на тот случай, если по какой-либо причине, браузер не сможет отобразить картинку. При его использовании, в месте отображения картинки на экран будет выведен указанный вами текст.
В таблице ниже представлены атрибуты тега , которые используются наиболее часто. Но на самом деле их намного больше, ведь для элемента доступны все универсальные атрибуты и события.
Таблица. Основные атрибуты элемента
Здесь w — дескриптор ширины, который представляет собой целое положительное число, за которым следует w.
HTML картинка. Примеры
Как добавить картинку в HTML?
Как уже говорилось, чтобы добавить картинку в HTML нужно использовать тег и его обязательные атрибуты src и alt. Также, поскольку тег – это строчный элемент, то его рекомендуется располагать внутри какого-нибудь блочного элемента. Например,
Как изменить размер картинки в HTML?
Чтобы изменить размер изображения используют атрибуты height (задаёт высоту картинки) и width (задаёт ширину картинки). Эти атрибуты можно указывать как вместе, так и по отдельности.
Если нужно пропорционально сжать картинку, то указывается только один атрибут (height, или width). Если же нужно чётко обозначить и высоту, и ширину картинки, то используют оба атрибута одновременно (height и width).
Как указать путь к файлу изображения в HTML?
Адрес ссылки на файл изображения может быть абсолютным и относительным.
../img/D-Nik-Webmaster.jpg – это относительный путь от документа. Две точки в самом начале означают, что вам нужно подняться на один каталог вверх. Таким образом, если смотреть на наш пример, то нужно подняться на 1 директорию вверх, найти там папку img, а в ней найти файл D-Nik-Webmaster.jpg.
../../D-Nik-Webmaster.jpg – указывает путь к файлу, но только с поднятием на 2 директории вверх.
Как сделать картинку ссылкой в HTML
Для того, чтобы сделать картинку ссылкой в HTML нужно содержимое элемента обрамить в тег .
Картинка CSS. Примеры
Использование CSS (каскадных таблиц стилей) даёт возможность более гибко, более удобно и эффективно, настраивать отображение картинок на веб-странице. Поэтому даже для того, чтобы задать ширину и высоту изображений многие веб-мастера часто используют именно каскадные таблицы стилей.
Давайте рассмотрим несколько самых распространённых примеров оформления изображений на веб-странице с помощью CSS.
Как поставить на фон картинку в HTML?
Чтобы установить изображение в качестве фона нужно задать селектору body свойство background, или background-image.
Как установить размер картинки в CSS
Чтобы задать размер картинки в CSS нужно использовать свойства width (ширина) и height (высота). Например:
- Давайте создадим новый класс imgsize.
- Для элементов этого класса пропишем свойство width равным 350px.
- Присвоим картинке созданный ранее класс imgsize.
Таким образом, ширина картинки будет равна 350px, а высота уменьшится пропорционально. Если нужно установить фиксированную ширину и высоту картинки, то можно добавить свойство height (Например, height:350px).
Как сделать картинку адаптивной
Адаптивность картинки – это возможность изображения одинаково отображаться на разных типах устройств с различными характеристиками. Например, на компьютерах с разным разрешением экрана монитора, ноутбуках с разным разрешением дисплея, планшетах, телефонах и т.д.
Самый простой способ сделать одинаковое отображение картинки на всех устройствах – это использовать следующие правила:
Как разместить текст на картинке
Как выровнять картинку по центру веб-страницы
Способ №1
Самый простой способ выровнять картинку по центру – это присвоить ей класс, сделать картинку блоком и задать ей автоматическое выравнивание с правой и левой части.
Способ №2
Помещаем картинку в блок
, присваиваем класс этому блоку (или параграфу), и устанавливаем правило выравнивание текста по центру.
Как сделать обтекание картинки текстом
Выровнять изображение по левому, или по правому краю веб-страницы (или какого-нибудь блока, контейнера) можно с помощью свойства float.
Таким образом, чтобы сделать обтекание картинки текстом слева или справа нужно прописать следующие правила:
Как выстроить картинки в ряд
Чтобы выстроить картинки по горизонтали в один ряд, нужно поместить их в блок
, присвоить класс этому блоку (или параграфу), и установить следующие правила:
Весь код будет выглядеть так:
Как изменить размер картинки при наведении на неё курсора мыши
Изображение можно масштабировать (изменять его размер), вращать, сдвигать, или наклонять с помощью свойства transform. А для регулирования скорости анимации используется свойство transition.
Например, если нам нужно, чтобы картинка увеличивалась (или уменьшалась) при наведении на неё курсора мыши, то нужно создать класс, присвоить его изображению и прописать следующие правила CSS:
Если нужно увеличить изображение, не увеличивая при этом размеры картинки, то картинку надо поместить в блок
стал размером с изображение; а также задать свойство overflow со значением hidden, чтобы всё пряталось за пределами блока
Почему не отображается картинка в HTML?
Причин почему картинка не отображается на веб-странице может быть несколько:
Эффекты изменения элемента веб страницы при наведении курсора мыши часто называют hover-эффектами. Связано это с тем, что при реализации таких эффектов используется псевдокласс :hover, который определяет стиль элемента при наведении на него курсора мыши.
Для начала рассмотрим вариант попроще. Допустим у Вас на страничке вставлена картинка, как приведено ниже:
Как вставлять картинки на веб-страницу вы можете узнать из статьи как вставить изображение на web-страницу.
И допустим вам необходимо менять ее отображение при наведении на нее курсора мыши. При вставке этого изображения к тегу img добвим атрибут , тогда html-код картинки будет выглядеть примерно так:
Для начала можно просто при наведении курсора сделать картинку прозрачной. За прозрачность в CSS отвечает свойство opacity , которое относится к CSS3. В качестве значения используются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта. Для старых версий Internet Explorer придется использовать свойство filter со значением alpha(Opacity=X) , так как они не поддерживают свойство opacity . Вместо X надо будет подставить число от 0 до 100, где 0 означает полная прозрачность, а 100 — полная непрозрачность.
Тогда, чтобы сделать картинку прозрачной при наведении курсора в файл стилей, или между тегами и html-файла нужно добавить следующий css-код:
На случай если вы не разбираетесь в CSS поясню, что запись img.animate1:hover говорит браузеру, что для всех элементов , имеющих атрибут class равный animate1 при наведении на них курсора мыши, применять указанные стили. А стили указываются между фигурными скобками . Если все сделали правильно, то должно получиться примерно так:
Можно сделать картинку в исходном состоянии полупрозрачной, а при наведении курсора делать ее не прозрачной. Тогда в CSS-файл нужно добавить такие строки:
img.animate1 filter: alpha (Opacity=25);
opacity: 0.25;
>
img.animate1:hover filter: alpha (Opacity=100);
opacity: 1;
>
Результат будет такой:
Для большего эффекта можно замедлить изменения прозрачности картинки. Для этого можно воспользоваться свойством CSS transition , которое устанавливает эффект перехода между двумя состояниями элемента. Добавим для примера одну секунду замедления. Тогда наш CSS код станет таким:
img.animate1 filter: alpha (Opacity=25);
opacity: 0.25;
-moz-transition: all 1s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */
-webkit-transition: all 1s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */
-o-transition: all 1s ease-in-out; /* эффект перехода для Opera до версии 12.10 */
transition: all 1s ease-in-out; /* эффект перехода для других браузеров */
>
img.animate1:hover filter: alpha (Opacity=100);
opacity: 1;
>
С помощью свойства transform изображение можно масштабировать, вращать, сдвигать, наклонять. Попробуем увеличить картинку. Тогда css-код будет таким:
img.animate1 — moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
>
img.animate1:hover — moz-transform: scale (1.5); /* эффект трансформации для Firefox до версии 16.0 */
— webkit-transform: scale (1.5); /* эффект трансформации для Chrome до версии 26.0, Safari, Android и iOS */
— o-transform: scale (1.5); /* эффект трансформации для Opera до версии 12.10 */
— ms-transform: scale (1.5); /* эффект трансформации для IE 9.0 */
transform: scale (1.5); /* эффект трансформации для других браузеров */
>
И результат будет таким:
К увеличению картинки можно добавить поворот. Тогда css стили немного изменяться:
img.animate1 — moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
>
img.animate1:hover — moz-transform: rotate (360deg) scale (1.5);
— webkit-transform: rotate (360deg) scale (1.5);
— o-transform: rotate (360deg) scale (1.5);
— ms-transform: rotate (360deg) scale (1.5);
transform: rotate (360deg) scale (1.5);
>
Выше мы рассмотрели случаи, когда в анимировании участвует одна картинка. Далее рассмотрим способы подмены одного изображения на другое. В этом случае обычно подготавливают два изображения одинакового размера: одно для исходного вида, другое для его подмены.
Допустим у нас есть две картинки, одна черно-белая другая цветная:
Сделаем так, чтобы при наведении курсора на черно-белое изображение отображалось цветное. Для этого исходную картинку сделаем фоном элемента div с помощью свойства background . А при наведнии на картинку курсора будем менять фоновую картинку с помощью все тех же псевдокласса hover и свойства background . Для реализации этого эффекта на html страницу добавляем элемент div с классом rotate1 :
И добавляем следующие описания стилей:
div.rotate1 background: url (img/2.jpg); /* Путь к файлу с исходным рисунком */
width: 480px; /* Ширина рисунка */
height: 360px; /* Высота рисунка */
>
div.rotate1:hover background: url (img/1.jpg); /* Путь к файлу с заменяемым рисунком */
>
Данный способ имеет один существенный недостаток. Так как второй рисунок загружается только при наведении курсора, то в случае если у пользователя медленный интернет, а размер файла с картинкой имеет большой размер, отображение картинки будет происходить с некоторой паузой. Поэтому ниже рассмотрим еще несколько способов подмены картинок при наведении курсора мыши.
Следующий способ будет основан на объединении двух картинок в один файл. Допустим нам нужно на страничку поместить кнопку, которая при наведении на нее курсора мыши меняла бы вид. Для этого два изображения объединяем в один файл и результирующая картинка будет выглядеть примерно так:
В этом случае смена одного рисунка на другой будет осуществляться путем сдвига фонового изображения по вертикали с помощью свойства background-position . Так как при клике по кнопке обычно происходит переход на другую страницу, то изображение вставим в элемент a> . Тогда в html-страницу вставляем такой код:
А в css-файл такой:
a.rotate2 background: url (img/button.jpg); /* Путь к файлу с исходным рисунком */
display: block; /* Ссылка как блочный элемент */
width: 50px; /* Ширина рисунка в пикселах */
height: 30px; /* Высота рисунка */
>
a.rotate2:hover background-position: 0 -30px; /* Смещение фона */
>
И последний на сегодня способ, это когда одно изображение размещается под другим с помощью css правила position: absolute . В этом случае помещаем в контейнер div два изображения:
И добавим css-стилей:
.animate2 position:relative;
margin:0 auto;/* устанваливаем блок div по центру страницы*/
width:480px; /* Ширина */
height: 360px; /* Высота */
>
.animate2 img position:absolute; /* абсолютное позиционирование*/
left: 0; /* выравниваем картинки по левому верхнему углу div-а*/
top: 0; /* выравниваем картинки по левому верхнему углу div-а */
>
После добавления правил css, картинки будут размещены друг под другом. Теперь управляя прозрачностью картинок с помощью свойства opacity в обычном состоянии будем показывать вторую картинку, а при наведении курсора первую. Для этого в обычном состоянии делаем картинку с классом first полностью прозрачной, а при наведении курсора наоборот: картинка с классом second будет полностью прозрачной, а с классом first не прозрачной:
Можно добиться плавности перехода добавив к последнему правилу свойство CSS transition :
.animate2:hover img.second, .animate2 img.second:hover opacity:0;
filter:alpha (opacity=0);
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
>
А если добавить свойство transform :
.animate2:hover img.second, .animate2 img.second:hover opacity:0;
filter:alpha (opacity=0);
-moz-transform:scale (0, 1);
-webkit-transform:scale (0, 1);
-o-transform:scale (0, 1);
-ms-transform:scale (0, 1);
transform:scale (0, 1); /* уменьшаем ширину картинки до 0 */
>
Комбинируя различные CSS свойства можно добиться различных hover эффектов при смене картинок во время наведения курсора мыши. Эти и другие примеры я поместил на этой странице, там же можно скачать исходники. На этом все, до новых встреч.
Читайте также:
- Как сделать морфемный разбор 5 класс
- Как сделать тесто для рулета с маком на кефире без дрожжей
- Как сделать отверстие в пеноблоке под вытяжку
- Как сделать ровное содержание в ворде с точками
- Как сделать мороженое рисунок
Предыдущая запись