Свойства background в css: Backgrounds фон в CSS уроки для начинающих академия

Содержание

Фон CSS

Пример <стиль> .фонбокс { ширина: 200 пикселей; отступ: 3px 130px 3px 10px; фон: url(«/pix/samples/71.gif») золото 90% 30% без повторов; } <дел>

Свойства этого элемента div были заданы с помощью свойства background, которое является сокращением для установки всех свойств фона.

CSS 9Свойство 0005 background — это сокращенное свойство для установки фона HTML-элемента.

Это свойство позволяет установить большинство свойств фона с помощью одного свойства.

Свойство background устанавливает следующие свойства:

фоновое изображение
фоновая позиция
размер фона
повтор фона
фон-происхождение
фоновая клипса
Фоновое приложение
цвет фона

Синтаксис

[ , ]*

Где

= || <позиция> [ / ]? || <стиль повтора> || <вложение> || <коробка> || <коробка> = || <позиция> [ / ]? || <стиль повтора> || <вложение> || <коробка> || <коробка> || <'фоновый цвет'>

Количество элементов, разделенных запятыми, определяет количество фоновых слоев.

Возможные значения

bg-изображение: Задает свойство background-image .
позиция: Задает свойство background-position .
черный размер: Задает свойство background-size .
повторяющийся стиль: Задает свойство background-repeat .
насадка: Задает свойство background-attachment.
коробка: Если присутствует одно значение box , то оно устанавливает оба параметра background-origin и background-clip в это значение. Если присутствуют два значения, то первое устанавливает background-origin , а второе background-clip 9.0006 .
'фоновый цвет': Задает свойство background-color .

Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:

начальный: Представляет значение, указанное как начальное значение свойства.
унаследовать: Представляет вычисленное значение свойства родительского элемента.
снято с охраны: Это значение действует как inherit или initial , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

`Общая информация`

Исходное значение

 Это основано на значениях отдельных свойств. Их начальные значения таковы:  фоновое изображение 
  нет 
  фоновая позиция 
  0% 0% 
  размер фона 
  авто 
  повтор фона 
  повтор 
  Фон-приставка 
  свиток 
  цвет фона 
  прозрачный 
  фон-происхождение 
  набивочный ящик 
  
  фоновая клипса 
  бордюр

Применяется к

Все элементы

Унаследовано?

№

СМИ

Визуальный

Анимируемый

Да (см. пример)

`Пример кода`

фон: url("/pix/smile.gif") синий 90% 30% без повторов исправлено

`Официальные спецификации`

CSS Backgrounds and Borders Module Level 3 (рекомендация кандидата W3C от 9 сентября 2014 г.)
CSS Уровень 2.1 (Рекомендация W3C от 7 июня 2011 г.)
CSS Уровень 1 (Рекомендация W3C от 17 декабря 1996 г.)

`html — Объявление всех свойств фона CSS в одной строке — особенно background-size`

спросил 7 лет, 10 месяцев назад

Изменено 2 года, 1 месяц назад

Просмотрено 43к раз

Итак, вот мой код:

 background: url(images/my-image.png) no-repeat center center/cover;

Это нормально работает в Chrome и Firefox, но не в Safari по какой-то причине?

Раньше я объявлял свой background-size в отдельной строке, но насколько я понимаю, должна быть возможность объявить все свойства в одной строке с помощью косой черты?

Будем признательны за любую помощь. Спасибо.

HTML
CSS
сафари

 2
 Поскольку однострочный короткий код кажется неизвестным для браузеров Safari, значение обложки:
 background: url(images/my-image.png) no-repeat center center / cover;
 
 Я сталкивался с такой же проблемой раньше. И следующее работало для всех браузеров:
   background: url(images/my-image.png) no-repeat;
фоновая позиция: центр;
background-size: cover;/*теперь это известно благодаря сафари*/
 
 фоновое свойство имеет следующие атрибуты.
   URL-адрес    ("путь к изображению") 
   bg-color   например, прозрачный или любой цвет
   bg-img-repeat   например,  повторить  или  нет=повторить 
   bg-image-position   по вертикали и по горизонтали например  по центру по центру 
   bg-img-размер   например  обложка ,  содержит ,  100% ,  800px  или  200px 100px  (ширина и высота) и т.

Штирлиц — Сеть печатных салонов в Перми