Что значит background: linear-gradient(white, white) 0 / var(--pos) no-repeat, grey;

@Vektoralgor · Регистрация: 03.03.2019

Студворк — интернет-сервис помощи студентам

Здравствуйте, помогите пж разобратся как работает ето строчка

Code
1
background: linear-gradient(white, white) 0 / var(--pos) no-repeat, grey;

она взята из примера стилизации input range

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
 
<body>
    <input type="range" min="0" max="100" value="0"  />
</body>
<style>
body {
  background: green;
}
 
input {
  appearance: none;
  height: 1vmin;
  
  --k: 0;
  --pos: calc(2vmin * 0.5 + var(--k) * (100% - 2vmin));
}
 
input::-webkit-slider-container {
  background: linear-gradient(white, white) 0 / var(--pos) no-repeat, grey;
}
 
input::-webkit-slider-thumb {
  appearance: none;
  width: 2vmin;
  height: 2vmin;
  border-radius: 50%;
  background: rgba(0, 0, 255, 0.5);
}
 
</style>
<script>
addEventListener('input', e => {
    e.target.style.setProperty('--k', +((e.target.value - e.target.min) / (e.target.max - e.target.min)));
}, false);
</script>
 
</html>

Тоесть когда я пытаюсь поставить

CSS
1
background: white 0 / var(--pos) no-repeat, grey;

вместо

CSS
1
  background: linear-gradient(white, white) 0 / var(--pos) no-repeat, grey;

то ето не работает

@AlexZaw · 26.06.2021, 22:48

Vektoralgor,

background это сокращенное свойство которое устанавливает следующие свойства в одном объявлении:
background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, и background-attachment

Теперь по порядку:
background: linear-gradient(white, white) 0 / var(--pos) no-repeat, grey;

linear-gradient(white, white) - это background-image - линейный градиент, начальный и конечный цвет белый.
0 / var(--pos) - 0 в данной записи отвечает за background-position и устанавливает сдвиг фонового изображения относительно левого верхнего угла блока.
Одно значение означает что это задается координата по оси X (в данном случае 0), а координата по оси Y без указания второго значения по умолчанию принимается за center
Через слеш в такой записи задается background-size в данном примере за размер фона отвечает кастомное свойство var(--pos) которое высчитывается с помощью JS исходя из положения ползунка.
То есть чем дальше сдвинут ползунок, тем больше размер белого фона.
no-repeat говорит что фон не повторяющийся
grey это второй цвет который находится "под" белым градиентом и занимает всю ширину элемента.

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

Вообще всю эту страшную запись можно упростить до вот такой:
background: linear-gradient(to right, white var(--pos), grey var(--pos));

@Vektoralgor · 27.06.2021, 07:32 **[ТС]**

Спасибо за обяснение

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .

@AlexZaw Модератор 2381 / 1741 / 677 Регистрация: 07.08.2016 Сообщений: 4,096
	26.06.2021, 22:48
	Сообщение было отмечено Vektoralgor как решение Решение Vektoralgor, `background` это сокращенное свойство которое устанавливает следующие свойства в одном объявлении: `background-clip`, `background-color`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`, и `background-attachment` Теперь по порядку: `background: linear-gradient(white, white) 0 / var(--pos) no-repeat, grey;` `linear-gradient(white, white)` - это `background-image` - линейный градиент, начальный и конечный цвет белый. `0 / var(--pos)` - `0` в данной записи отвечает за `background-position` и устанавливает сдвиг фонового изображения относительно левого верхнего угла блока. Одно значение означает что это задается координата по оси X (в данном случае 0), а координата по оси Y без указания второго значения по умолчанию принимается за `center` Через слеш в такой записи задается `background-size` в данном примере за размер фона отвечает кастомное свойство `var(--pos)` которое высчитывается с помощью JS исходя из положения ползунка. То есть чем дальше сдвинут ползунок, тем больше размер белого фона. `no-repeat` говорит что фон не повторяющийся `grey` это второй цвет который находится "под" белым градиентом и занимает всю ширину элемента. Ваш вариант не работает потому, что свойства `background-position` и `background-size` можно устанавливать только для изображений к которым относятся и градиенты. Вообще всю эту страшную запись можно упростить до вот такой: `background: linear-gradient(to right, white var(--pos), grey var(--pos));` 3

@Vektoralgor 1 / 1 / 0 Регистрация: 03.03.2019 Сообщений: 268
	27.06.2021, 07:32 [ТС]
	Спасибо за обяснение 0

Что значит background: linear-gradient(white, white) 0 / var(--pos) no-repeat, grey;

Решение