Css image: CSS images — CSS: Cascading Style Sheets

This page was last modified on 30 мая 2023 г. by MDN contributors.

Тип данных CSS представляет собой двумерный тип данных может быть представлен одним из следующих способов: CSS может обрабатывать следующие типы данных.

<image> CSS тип данных представляет собой двухмерное изображение.

Syntax

Тип данных <image> может быть представлен любым из следующих:

• Изображение, обозначенное типом данных url()
• <gradient> тип данных
• Часть веб-страницы, определяемая функцией element()
• Изображение, фрагмент изображения или сплошной участок цвета, определенный функцией image() .
• Смешение двух или более изображений, определяемое функцией cross-fade() .
• Выбор изображений, выбранных на основе разрешения, определенного image-set() .

Description

CSS может обрабатывать следующие виды изображений:

• Изображения с внутренними размерами (натуральный размер), такие как JPEG, PNG или другой растровый формат .
• Изображения с несколькими внутренними размерами , существующие в нескольких версиях в одном файле, как некоторые форматы .ico. (В этом случае внутренние размеры будут такими же, как у изображения, имеющего наибольшую площадь, и с соотношением сторон, наиболее близким к рамке вмещения. )
• Изображения без внутренних размеров, но с внутренним соотношением сторон по
  ширине и высоте, например SVG или другой векторный формат .
• Изображения без внутренних размеров или внутреннего соотношения сторон , такие как градиент CSS.

CSS определяет конкретный размер объекта, используя (1) его внутренние размеры ; (2) его указанный размер , определенный свойствами CSS, такими как width , height или background-size ; и (3) его размер по умолчанию , определяемый типом свойства, с которым изображение используется:

Вид объекта (свойство CSS)	Размер объекта по умолчанию
background-image	Размер области позиционирования фона элемента
list-style-image	Размер персонажа 1em
border-image-source	Размер области изображения границы элемента
cursor	Размер,определяемый браузером и совпадающий с обычным размером курсора в системе клиента.
mask-image	?
shape-outside	?
mask-border-source	?
symbols() для @counter-style	Функция риска.Если поддерживается,то размер,определяемый браузером,соответствует обычному размеру курсора в системе клиента
content для псевдоэлемента ( ::after / ::before )	Прямоугольник размером 300px × 150px

Размер конкретного объекта вычисляется по следующему алгоритму:

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

Примечание. Не все браузеры поддерживают все типы изображений для каждого ресурса. См. Подробности в разделе совместимости браузеров .

Accessibility concerns

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

• MDN Понимание ВСАГ,Руководящий принцип 1.1 пояснения
• Понимание Критерий успеха 1.1.1 | W3C Понимание WCAG 2.0

Formal syntax

<image> =   <url>       |  <gradient>  

Examples

Valid images

url(test.jpg)               / * <url>, если test.jpg является фактическим изображением * /
linear-gradient(blue, red)  / * A <градиент> * /
element(#realid)            / * Часть веб-страницы, на которую ссылается функция element (), если «realid» - это существующий идентификатор на странице * /
image(ltr 'arrow.png#xywh=0,0,16,16', red)
                            / * Раздел 16x16 <url>, начиная сверху, слева от исходного изображения, пока arrow.png является поддерживаемым изображением, в противном случае - сплошным красным образцом. Если язык - RTL, изображение будет перевернуто по горизонтали. * /
cross-fade(20% url(twenty.png), url(eighty.png))
                            / * изображения с перекрестным затуханием, двадцать из которых являются непрозрачными на 20%, а восемьдесят - непрозрачными на 80%.
  * /
image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
                            / * подборка изображений с разным разрешением * /

Invalid images

nourl.jpg            / * Файл изображения должен быть определен с помощью функции url (). * /
url(report.pdf)      / * Файл, на который указывает функция url (), должен быть изображением. * /
element(#fakeid)     / * Идентификатор элемента должен быть существующим идентификатором на странице. * /
image(z.jpg#xy=0,0)  / * Пространственный фрагмент должен быть записан в формате xywh = #, #, #, # * /
image-set('cat.jpg' 1x, 'dog.jpg' 1x) / * каждое изображение в наборе изображений должно иметь разное разрешение * /

Specifications

Browser compatibility

	Desktop	Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet
image	1	12	1	10	2	1	4. 4	18	4	11	1	1.0
cross-fade	17 Поддерживает оригинальное двойное изображение только с процентной реализацией.	79 Поддерживает оригинальное двойное изображение только с процентной реализацией.	No	No	15 Поддерживает оригинальное двойное изображение только с процентной реализацией.	10 Поддерживает оригинальное двойное изображение только с процентной реализацией. 5.1 Поддерживает оригинальное двойное изображение только с процентной реализацией.	≤37 Поддерживает оригинальное двойное изображение только с процентной реализацией.	18 Поддерживает оригинальное двойное изображение только с процентной реализацией.	No	14 Поддерживает оригинальное двойное изображение только с процентной реализацией.	9.3 Поддержка оригинального двойного изображения только с процентной реализацией. 5 Поддерживает оригинальное двойное изображение только с процентной реализацией.	1.0 Поддержка оригинального двойного изображения только с процентной реализацией.
element	No	No	57 29-57 -moz-element() ограничен background-image , background , border-image и border-image-source . 4-29 -moz-element() ограничен background-image и background .	No	No	No	No	No	60 29-60 -moz-element() ограничен background-image , background , border-image и border-image-source . 4-29 -moz-element() ограничен background-image и background .	No	No	No
gradient	26 10	12	3.6 Градиенты ограничены background-image , border-image и mask-image .	10	15 12.1 11-15	7 5.1	≤37 ≤37	26 18	4 Градиенты ограничены background-image , border-image и mask-image .	14 12.1 11-14	7 6	1.5 1.0
image	No	No	No [«См. Ошибку 703217. «, «Функция -moz-image-rect() поддерживает фрагменты, начиная с Firefox 4. «]	No	No	No	No	No	No Функция -moz-image-rect() поддерживает фрагменты, начиная с Firefox 4.	No	No	No
image-set	21	79	90 88 [«В свойствах cursor и content градиенты не поддерживаются в качестве аргументов функции image-set() . См. Ошибку 1696314. », «До Firefox 89 функция type() не поддерживалась в качестве аргумента функции image-set() . «]	No	15	6 Поддержка только изображений url а x — единственная поддерживаемая единица разрешения. См. Ошибку 160934 .	4.4	25	90 88 [«В свойствах cursor и content градиенты не поддерживаются в качестве аргументов функции image-set() . См. Ошибку 1696314. », «До Firefox 89 функция type() не поддерживалась в качестве аргумента функции image-set() . «]	14	6 Поддержка только изображений url а x — единственная поддерживаемая единица разрешения. См. Ошибку 160934 .	1.5
paint	65	79	No	No	52	No	65	65	No	47	No	9.2

See also

• <gradient>
• element() Experimental
• image()
• image-set()
• cross-fade()

• ID selectors

  Селектор CSS ID соответствует элементу на основе значения атрибута элемента.

• <ident>

  Тип данных CSS <ident> обозначает произвольную строку, используемую в качестве идентификатора.

• image-orientation

  CSS-свойство image-orientation задает независимую от макета коррекцию изображения Не применяет никакого дополнительного вращения изображения;оно ориентировано так,как закодировано.

• image-rendering

  Свойство image-rendering CSS задает алгоритм масштабирования.

• 1
• …
• 557
• 558
• 559
• 560
• 561
• …
• 857
• Next

изображений CSS — javatpoint

следующий → ← предыдущая Изображения являются важной частью любого веб-приложения. Включение большого количества изображений в веб-приложение, как правило, не рекомендуется, но важно использовать изображения везде, где они требуются. CSS помогает нам управлять отображением изображений в веб-приложениях. Стиль изображения в CSS подобен стилю элемента с использованием границ и полей. Существует несколько свойств CSS, таких как border свойство, height свойство, width свойство и т. д., которые помогают нам стилизовать изображение. Давайте обсудим стилизацию изображений в CSS, используя несколько иллюстраций. Эскиз изображения Свойство границы используется для создания эскиза изображения. Пример <голова> <стиль> картинка { граница: 2 пикселя сплошного красного цвета; радиус границы: 5px; отступ: 10 пикселей; } h3{ красный цвет; } <тело> Эскиз изображения png»> Добро пожаловать в javaTpoint Протестируйте сейчас Прозрачное изображение Чтобы сделать изображение прозрачным, мы должны использовать свойство opacity . Значение этого свойства лежит в пределах от 0,0 до 1,0 соответственно. Пример <голова> <стиль> картинка { граница: 2 пикселя сплошного красного цвета; радиус границы: 5px; отступ: 10 пикселей; непрозрачность: 0,3; } h3{ красный цвет; } <тело> Прозрачное изображение Добро пожаловать в javaTpoint Протестируйте сейчас Округлое изображение Свойство border-radius задает радиус изображения с рамкой. Используется для создания округлых изображений. Возможные значения для закругленных углов приведены ниже: border-radius: Устанавливает все четыре свойства border-radius. border-top-right-radius: Устанавливает границу правого верхнего угла. border-top-left-radius: Устанавливает границу верхнего левого угла. border-bottom-right-radius: Устанавливает границу правого нижнего угла. border-bottom-left-radius: Устанавливает границу нижнего левого угла. Пример <голова> <стиль> #img1{ граница: 2 пикселя сплошного зеленого цвета; радиус границы: 10 пикселей; отступ: 5px; } #img2{ граница: 2 пикселя сплошного зеленого цвета; радиус границы: 50%; отступ: 5px; } h3{ красный цвет; } <тело> Закругленное изображение Добро пожаловать в javaTpoint Обвести изображение Добро пожаловать в javaTpoint Протестируйте сейчас Адаптивное изображение Автоматически подстраивается под размер экрана. Он используется для автоматической настройки изображения в соответствии с указанным полем. Пример <голова> <стиль> #img1{ максимальная ширина: 100%; высота:авто; } h3{ красный цвет; } <тело> Адаптивное изображение Вы можете изменить размер браузера, чтобы увидеть эффект Добро пожаловать в javaTpoint Протестируйте сейчас Центрировать изображение Мы можем центрировать изображение, используя свойства left-margin и right-margin . Мы должны установить эти свойства на auto , чтобы создать блочный элемент. Пример <голова> <стиль> #img1{ поле слева: авто; поле справа: авто; дисплей:блок; } ч2, ч3{ выравнивание текста: по центру; } <тело> Центральное изображение png»> Добро пожаловать в javaTpoint Протестируйте сейчас Следующая темаCSS Overflow ← предыдущая следующий →

Набор изображений CSS | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Набор изображений CSS

• Глобальное использование

  42,24% + 55,16% «=» 97,4%

Метод, позволяющий браузеру выбрать наиболее подходящее изображение CSS из заданного набора.

Chrome

1. 4–20: не поддерживается
2. 21–112: частичная поддержка
3. 113: поддерживается
4. 114–116: поддерживается

1. 04% — Not supported»> 12–18: не поддерживается
2. 79–112 : Частичная поддержка
3. 113: Поддерживается

Safari

1. 3.1–5.1: Не поддерживается
2. 6–9.1: Частичная поддержка
3. 10 — 13.1: частичная поддержка
4. 14 — 16.4: частичная поддержка
5. 16.5: частичная поддержка
6. 16.6: частичная поддержка
7. TP: поддерживается

1. 2 — 85: не поддерживается
2. 01% — Disabled by default»> 86 — 87: Отключено по умолчанию
3. 88: Частичная поддержка
4. 89 — 112: Поддерживается
5. 113: Поддерживается
6. 114 — 115: Поддерживается

Opera

IE

1. 5.5–10: Не поддерживается
2. 11: Не поддерживается

Chrome для Android

Safari на iOS

1. 01% — Not supported»> 3.2 — 5.1: не поддерживается
2. 6 — 9.3: частичная поддержка
3. 10 — 13.7: частичная поддержка
4. 14 — 16.4: частичная поддержка
5. 16.5: частичная поддержка

Samsung Internet

1. 4–20: частичная поддержка
2. 21: частичная поддержка

Opera Mini

1. все: не поддерживается

Opera Mobile

1. 10–12. 1: Не поддерживается
2. 73: Частичная поддержка

Браузер UC для Android

1. 95% — Partial support, requires this prefix to work: -webkit-«> 13.4: Частичная поддержка

Браузер Android

1. 2.1–4.3: Не поддерживается
2. 4.4–4.4.4: Частичная поддержка
3. 1 13: Частичная поддержка

Firefox для Android

1. 113: Поддерживается

Браузер QQ

1. 13.1: Частичная поддержка

Браузер Baidu

1. 13.18: Частичная поддержка

Браузер KaiOS

1. 2.5: Не поддерживается