Как уменьшить фоновое изображение css

Фоновые изображения в CSS

Для любого элемента в документе можно установить фоновое изображение используя CSS свойство: background-image .

Возможные значения свойства background-image :

  • url – абсолютный или относитльный путь к файлу с изображением.
  • none – изображение отсутствует, это значение по умолчанию.

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

Если фоновое изображение не заполняет собой всё пространство элемента, то он выкладывается "плиткой".

Фиксация фонового изображения

Если документ образует в окне браузера полосу прокрутки, то есть документ не влазит в окно полностью, то фоновое изображение прокручивается вместе с содержимым страницы. Вот пример:

Фоновое изображение можно зафиксировать. Для этого в CSS применяется свойство background-attachment . По умолчанию его значение равно scroll (прокрутка или подвижный фон).

То есть прошлый пример полностью аналогичен следующему:

Чтобы зафиксировать фоновое изображение свойству background-attachment нужно назначить значение fixed . Исправим предыдущий пример и посмотрим как он будет работать:

Значения scroll и fixed для свойства background-attachment были в версии CSS2.1. В спецификации CSS3 появилось дополнительное значение для этого свойтва – local .

При использовании свойтва local , а применять его имеет смысл к блокам в документе, фоновое изображение блока будет прокручиваться, если блок имеет полосу прокрутки и пользователь прокручивает её. Тогда содержимое блока и фоновое изображение прокручиваются в блоке. При прокрутке страницы, а не блока, фоновое изображение блока прокручивается вместе с внеблоковым содержимым документа. Это проще один раз увидеть, чтобы понять. Вот пример:

На этом тема фиксации фоновых изображений в рамках этой статьи закрыта.

Повторение фонового изображения

Выше в статье писалось, фоновый рисунок повторяется "плиткой", если не занимает всей площади блока. Управлять вариантами повторений фонового изображения можно при помощи свойства background-repeat . Возможные значения этого свойства:

  • repeat – фоновый рисунок повторяется "плиткой" (значение по умолчанию).
  • no-repeat – фоновый рисунок не повторяется, показывается только один раз.
  • repeat-x – повторять изображение только по горизонтали.
  • repeat-y – повторять изображение только по вертикали.

Теперь тот же самый пример, только повторим изображение по вертикали.

Позиционирование фонового изображения

Изменить начально положение фонового изображения, заданного свойством background-image , можно при помощи свойства background-position . Если быть точным, задаётся позиция верхнего левого угла изображения.

Для позиционирования можно использовать следующие ключевые слова:

Позиционирование по горизонтали:

  • left – расположить слева.
  • center – расположить по центру.
  • right – расположить справа.

Позиционирование по вертикали:

  • top – расположить сверху.
  • center – расположить по центру.
  • bottom – расположить снизу.

Кроме ключевых слов можно использовать единицы измерения CSS такие как пикселы, проценты и прочие.

Свойство background

Свойство background является базовым и используя его можно задать значение всех дочерних свойств, описаных выше.

  • background-color – работа с этим свойством подробно описана в статье "Цвета в CSS"
  • background-attachment
  • background-image
  • background-position
  • background-repeat

При использовании свойства background параметры задаются через пробел в любом порядке, только параметры позиционирования при совпадии значений устанавливаются сначала для горизонтали, потом для вертикали.

Как изменить фоновое изображение css при клике?

Я хотел бы изменить css "background-image:", когда кто-то нажимает кнопку.

Я не уверен, могу ли я изменить его с помощью css или мне нужно будет включить java-скрипт. Кроме того, если мне нужен скрипт java, какой код мне нужен?

Моя текущая работа с css и выглядит так:

7 ответов

JQuery

В этих разных состояниях вы можете делать все, что вам нужно. Есть также множество других государств, которые вы можете использовать http://api.jquery.com/category/events/mouse-events/

HTML

CSS

есть только альтернативы css, но они не очень хороши в поддержке: http://tympanus.net/codrops/2012/12/17/css-click-events/

1. CSS-псевдоклассовый селектор: активный

Если вы не заботитесь о сохранении, вы всегда можете использовать псевдокласс ": active". Изображение будет затронуто только до тех пор, пока ваша мышь не будет нажата. Как только вы нажмете мышь, он вернется. На данный момент это примерно так же близко, как вы можете получить в CSS.

2. Измените атрибут стиля с помощью JavaScript

JavaScript — это единственный способ, которым вы сможете щелкнуть объект, мышь и фон по-прежнему меняются. JavaScript дает вам пару способов сделать это.

Вы можете использовать JavaScript, чтобы изменить атрибут стиля объекта, чтобы обновить "фоновое изображение".

3. Измените атрибут класса с помощью JavaScript

Или аналогичным образом вы можете создать два класса в своем CSS и использовать JavaScript для обновления атрибута класса объекта.

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

Адаптивное целое фоновое изображение с помощью CSS

Адаптивное целое фоновое изображение с помощью CSS

От автора: В этой обучающей статье мы рассмотрим простую технику создания фонового изображения, которое будет полностью растягиваться на всю ширину окна просмотра (viewport) браузера. Для этого нам понадобится CSS-свойство background-size; JavaScript не нужен.

скачать исходникидемо

Примеры адаптивных целых фоновых изображений

В настоящее время довольно популярным стало использование в качестве фона огромной фотографии, которая занимает всю веб-страницу. Вот примеры нескольких сайтов, у которых установлены адаптивные целые фоновые изображения:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Если вы хотели бы добиться похожего результата в вашем следующем веб-проекте, тогда эта статья – это то, что вам нужно.

Базовые принципы

Вот наш план действий.

Используйте свойство background-size, чтобы полностью заполнить окно просмотра

CSS-свойство background-size имеет значение cover. Значение cover сообщает браузеру о том, что необходимо автоматически и пропорционально масштабировать ширину и высоту фонового изображения, чтобы они всегда были равны или были больше ширины/высоты окна просмотра.

Используйте медиа-запрос для обработки небольших фоновых изображений для мобильных устройств

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

Изображение, которое я использовал в демо-примере, имеет разрешение 5500x3600px. Этого разрешения хватит для большинства широкоформатных компьютерных мониторов, имеющихся в настоящее время в продаже. Но ради этого придется обрабатывать файл размером 1.7MB.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *