CSS Basic: фоновое сокращение

Сделайте свойства фона CSS в одну строку

В прошлой статье мы уже научились использовать различные свойства фона, такие как background-color, background-image, background-repeat и т. д.

В этой статье мы собираемся сделать то же самое с одной строкой кода.

Исходный код:

https://www.udemy.com/course/a-complete-css-course/?referralCode=D70F3923FF6501A398AA

Оригинальный CSS выглядит так

div{
height: 300px;
width: 300px;
background-color:aqua;
background-image: url(crown.png);
background-repeat: no-repeat;
background-position: top right;
background-size: 60px;
} 

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

div{
height: 300px;
width: 300px;
background: aqua url(crown.png) no-repeat top right / 60px ;
}

Может быть ясно отделить размер фона от стенографии.

div{
height: 300px;
width: 300px;
background: aqua url(crown.png) no-repeat top right ;
background-size: 60px;
}

Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram.