Background contain: CSS background-size property

background-size позволяет управлять размерами фона · GitHub

background-size позволяет управлять размерами фона

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Show hidden characters

	html, body
	{
	height: 100%;
	}
	/*
	background-size позволяет управлять размерами фона
	предустановленные значения
	contain == auto 100%;
	cover == 100% auto;
	*/
	body
	{
	background: url(http://img-fotki. yandex.ru/get/6209/7374971.10/0_6a4c8_e10d1d29_XXL) no-repeat;
	background-size: 100% auto;
	font-size: 40px
	}
	.multiple
	{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	background:
	url(//img. yandex.net/i/www/logo.png) no-repeat,
	url(http://mailstatic.yandex.net/disk-promo/_/h3Gb15R7-WEubOakS91pLLoFH9c.jpg) top left no-repeat;
	/* справедливо и для множественных фонов */
	background-size: 60px auto, auto 100%;
	}

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Show hidden characters

html»>

	Уиии!
	<div></div>

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Show hidden characters

{«view»:»separate»,»fontsize»:»110″,»seethrough»:»»,»prefixfree»:»1″,»page»:»all»}

tachyons-background-size / Theming / Docs / ТАХИОНЫ

tachyons-background-size / Theming / Docs / ТАХИОНЫ Тахионы

v4. 12.0

Скины Парит Размер фона Границы Радиус границы Коробчатая тень Непрозрачность

Размер фона

Background-size влияет на то, как фоновые изображения заполняют содержащиеся в них элементы. Хотя измерения могут быть объявлены явно для определения размера изображения, значения наиболее пригодными для повторного использования являются

содержат , а закрывают .

Примеры

.contain { background-size: contains }

contains гарантирует, что внутри элемента отображается все изображение, независимо от размеров элементов.

.cover { background-size: cover }

cover обеспечит покрытие всего элемента, но не гарантирует, что будет показано все изображение.

Ховерс

Следующий

Границы

Артикул

MDN — Размер фона

тахион-фоновый размер

v5. 0.5 136 Б

Декларации

8

Селекторы

8

Макс. Оценка специфичности

10

Размер среднего размера Правило

1

Исходный код

src/_background-size.css

/*
   РАЗМЕР ФОНА
   Документы: http://tachyons.io/docs/themes/background-size/
   Расширения медиазапроса:
     -ns = не маленький
     -м = средний
     -л = большой
*/
/*
  Часто используется в сочетании с фоновым изображением, установленным как встроенный стиль.
  на html-элементе.
*/
  .cover {размер фона: обложка!важно; }
  .contain {размер фона: содержит!важно; }
@media (--точка останова-не-маленький) {
  .cover-ns {размер фона: обложка!важно; }
  .contain-ns {размер фона: содержит!важно; }
}
@media (--точка останова-среда) {
  .cover-m {размер фона: обложка!важно; }
  .  contain-m {размер фона: содержит!важно; }
}
@media (--breakpoint-large) {
  .cover-l {размер фона: обложка!важно; }
  .contain-l {размер фона: содержит!важно; }
}

 

Обзор тахионов

Таблица стилей Таблица свойств

Типография

Тип Масштаб Мера Высота строки / Интерлиньяж Отслеживание Вес шрифта Стиль шрифта Вертикальное выравнивание Выравнивание текста Преобразование текста Оформление текста Белое пространство Семейства шрифтов Авенир Далее Гельветика Робото Сан-Франциско Система без засечек Ателас Баскервиль Гарамонд Грузия Системная засечка

Макет

Отладка Отладка с сеткой Базовая сетка Флексбокс Размер коробки Расстояние Плавает Клирфикс Отображать Ширина Максимальная ширина Высоты Позиция

Тематика

Оболочек Скины анимации Парит Размер фона Границы Радиус границы Коробчатая тень Непрозрачность

Элементы

Изображений Ссылки Списки Формы Столы

Могу ли я отправить по электронной почте… background-size

Могу ли я отправить по электронной почте… background-size

Gmail

Настольная веб-почта

2019-02

iOS

2019-02

1

Андроид

2019-02

1

Мобильная веб-почта

2020-02

Перспектива

Окна

2007 г.

3

2010

3

2013

3

2016

3

2019

3

Почта Windows

2019-02

macOS

2019-02

Outlook.com

2019-02

iOS

2019-02

Андроид

2019-02

Яху! Почта

Настольная веб-почта

2019-02

2

iOS

2019-02

2

Андроид

2019-02

2

АОЛ

Настольная веб-почта

2019-02

2

iOS

2019-02

2

Андроид

2019-02

2

Мозилла Тандерберд

macOS

60. 5.0

ПротонПочта

Настольная веб-почта

2020-03

iOS

2020-03

Андроид

2020-03

Быстрая почта

Настольная веб-почта

2021-07

ПРИВЕТ

Настольная веб-почта

2020-06

Апельсин

Настольная веб-почта

2019-08

2021-03

iOS

2019-08

Андроид

2019-08

LaPoste.net

Настольная веб-почта

2021-08

СФР

Настольная веб-почта

2019-08

iOS

2019-08

Андроид

2019-08

GMX

Настольная веб-почта

2022-06

iOS

2022-06

Андроид

2022-06

1 и 1

Настольная веб-почта

2022-06

Андроид

2022-06

WEB.