html и css для начинающих

кнопка удаления
кнопка удаления
кнопка меню

Свойства CSS для изображений

Управление размером изображения с помощью CSS


Размером изображения можно управлять с помощью свойств width и height. Значения можно указывать в любых доступных единицах, но я встречала рекомендации устанавливать нужный размер изображения до загрузки на сайт, так как при изменении ширины или длины, изображение может потерять четкость и т.д.

flowerwidth

Необходимо учитывать, что браузер IE не корректно отображает стили изображений, если не указана их ширина и высота. Существует несколько решений этой проблемы (CSS-хаки, условные комментарии, JS, мне помог вот такой способ - в файл со стилями нужно добавить запись:

style for IE

Выравнивание изображений


Вместо атрибута align элемента для выравнивания изображений все чаще используют свойство float.

floatcss

Свойство float определяет, по какой стороне будет выравниваться элемент. Значения:

dandelionfloatright

При вставке изображения в какой-нибо контейнер(div, ячейка таблицы), можно столкнуться с белой полосой между изображением и границей контейнера. У меня такая проблема возникла, когда я вставила изображение в ячейку таблицы. Снизу появилась белая полоса, которая не убиралась, пока я не сделала следующее:

Белая полоска пропала. Существует несколько способов избавиться от этой полосы, но я, пока, нашла только такой.

Центрирование изображения


По умолчанию изображения являются встроенными элементами.
Это означает, что они окружены текстом. Для центрирования изображения его нужно превратить в блочный элемент, используя свойство display со значением blосk (у меня и без этого значения изображение центрировалось с помощью margin-left/right: auto).
После превращения изображения в блочный элемент можно центрировать, применив к изображению свойство margin и установить для левого и правого полей значения auto.

Методы определения размера и выравнивания изображений также могут использоваться с элементом HTML5 <figure>.

centercss
center

Фоновые изображения. Свойство background-image


Свойство background-image устанавливает фоновое изображение для элемента (это может быть вся страница или ее часть). По умолчанию фоновое изображение повторяется, заполняя весь блок.
В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.
В CSS3 допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую.
Путь к изображению следует после букв url и помещается в круглые скобки и кавычки (можно без кавычек).

Пример:

backgrounimagecss
backgroundimage

Повторяющиеся изображения.
Свойства background-repeat и background-attachment


Свойство background-repeat определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image.

Может принимать четыре значения:

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

Это свойство может принимать одно из двух значений:

repeat.png
repeatimg

Положение фонового изображения. Свойство background-position


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

Это свойство обычно имеет пару значений. Первое представляет положение по горизонтали, второе - повертикали:

Если указать только одно значение, то вторым значением по умолчанию будет center. Можно использовать пару значений в пикселах или процентах. Они определяют расстояние от верхнего левого угла окна браузера (или объекта-контейнера). Верхний левый угол соответствует значению 0% 0%.

positioncss
position

Стенографическое свойство background


Свойство background используется в качестве стенографического свойства для всех остальных свойств фона, а также для свойства background-color.

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

  1. background-color
  2. background-imaqe
  3. background-repeat
  4. background-attachment
  5. background-position
background

Язык CSSЗ также допускает использование нескольких фоновых изображений путем повторения свойства background.

CSS3 Градиенты

В CSSЗ появилась возможность задавать для блока градиентный фон. Градиент создается с помощью свойства background-image.
Для создания линейного градиента нужно указать два цвета, между которыми создается плавный переход. Некоторые браузеры позволяют указать угол градиента или даже разные типы градиентов (например, радиальный), однако линейный градиент поддерживается лучше остальных.

Пример:
Для браузера chrome

gradientcss
gradient