22/23 Помогите разобраться

`.pattern {
height: 100%;
background-size: 35px 35px;

background-position: 
    35px 0px,
    70px 35px,
    0px 35px,
    35px 70px,
    35px 35px,
    35px 35px;
background-image: 
    linear-gradient(135deg, transparent 23px, #555555 23px),
    linear-gradient(225deg, transparent 23px, #555555 23px),
    linear-gradient(45deg, transparent 23px, #555555 23px),
    linear-gradient(315deg, transparent 23px, #555555 23px),
    linear-gradient(315deg, transparent 23px, #000000 23px),
    linear-gradient(135deg, transparent 50%, #000000 50%);
    background-repeat: no-repeat;

}

body {
background: url("/assets/course70/bamboo.jpg");
min-width: 555px;
min-height: 298px;
}

html,
body {
height: 100%;
margin: 0;
}`

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

Ссылку на похожую тему не кинете? Если я правильно помню, то ошибка была в порядке цветов в одном из градиентов.

Ваша самая главная ошибка в том, что вы поменяли размер градиента (фонового изображения). В исходном варианте было background-size: 115px 115px;
А дальше цвета в градиентах наоборот написали и координаты background-position предложенные конечно не подошли.
Это одно из самых сложных на мой взгляд заданий. Ему давно требуется разбор.
Попробуем.
Вы правильно определили, что сюрикен строится из градиентов серого и черного цветов в сочетании с прозрачным.
Однако размер цветных треугольников вы не посчитали. Это 25px.
Будет проще для понимания, если каждый градиент представить отдельно с заменой прозрачного цвета на любой другой.
Вот что получается:


(прозрачный цвет заменен другим для наглядности)
Элемент (сюрикен) составляется совмещением цветных частей вовнутрь и прозрачными частями наружу с помощью предложенных координат.
Полный вариант кода:
.pattern {
height: 100%;
background-size: 115px 115px;
background-image:
linear-gradient(45deg, #555555 25px, transparent 25px),
linear-gradient(315deg, #555555 25px, transparent 25px),
linear-gradient(135deg, #555555 25px, transparent 25px),
linear-gradient(225deg, #555555 25px, transparent 25px),
linear-gradient(45deg, #000000 25px, transparent 25px),
linear-gradient(225deg, #000000 25px, transparent 25px);
background-repeat: repeat;
background-position:
70px -45px,
-45px -80px,
35px 70px,
-80px 35px,
35px -45px,
-45px 35px;
}
Это пример с координатами, предложенными в задании. Есть и другие варианты.
Если я что-то упустила или нужно подробнее расписать отдельные моменты, то напишите.

22 лайка

В размерах фона ничего менять не надо. Мне это задание сложным не показалось, после того, как я в тетради нарисовал систему координат и проставил точки позиций. Отталкиваясь от них, становиться просто расставлять нужные квадраты. Попробуйте

Спасибо огромное! Разобрался) Почему-то сразу не смог посчитать размер цветных треугольников.

1 лайк

Странно, но у меня 99% хотя все координаты одинаковы (порядок расположения только разный):

background-image: linear-gradient(-45deg, #555555 25px, transparent 25px), linear-gradient(225deg, #555555 25px, transparent 25px), linear-gradient(45deg, #000000 25px, transparent 25px), linear-gradient(225deg, #000000 25px, transparent 25px), linear-gradient(45deg, #555555 25px, transparent 25px), linear-gradient(135deg, #555555 25px, transparent 25px); background-position: -45px -80px, -80px 35px, 35px -45px, -45px 35px, 70px -45px, 35px 70px
Может, где-то ошибка? Помогите найти. Ведь все треугольники я выстроил

Градиенты с черным цветом должны быть последними. Иначе 100% не получается.

1 лайк

C размерами элементов не понял. Пересмотрел прошлую тему с background-position с отр. значениями и в тупике. Почему у указанного элемента отр. значение по y?

1 лайк

Один из серых фрагментов находится не на своем месте в свойстве background-image.

Background-position были даны изначально для всех элементов. Разве в данном случае есть разница на каком месте элемент стоит, если под него ставить background-position. Мне непонятны отрицательные значения по оси y. Что-то я элементарное упускаю:grinning:

Конечно, есть разница. Градиенты в определенном порядке, и background-position - тоже.
Отрицательные значения двигают фон вверх (по y) и влево (по x).

1 лайк

Может быть, кому-то поможет моё видение загвоздки, хотя Ineska уже подробно описала в картинках, и именно её объяснение мне дало сразу понимание. Здесь не 2 цвета градиентов, а ТРИ!! Те 2, что указаны в задании, и transparent!! И градиенты нужно строить не по этим 2-м цветам, а каждый из 2-х указанных с transparent. В итоге мы имеем 4 треугольника серый/transparent, которые образуют края сюрикена, и 2 чёрных треугольника (опять же, градиент “чёрный/transparent”), которые, соприкасаясь гипотенузами в центре, формируют чёрный квадрат-центр. Градиентов серый/чёрный в этом задании НЕТ!! Для большей наглядности можно заменить временно transparent на какой-нибудь видимый цвет, чтобы сопоставить части.

1 лайк

Добрый день.
Выполнил задание (с вашей помощью) но остался вопрос, помогите разобраться.

А почему вы решили, что должен быть правый верхний угол?

Потому-что так задано в градусах. Проверил повторно и убрал остальные свойства - правый верхний угол (без значений background-position).
Но вопрос больше, почему градиент вообще появляется не в контейнере

Скорее всего вы не совсем понимаете, как построен каждый градиент. На вашем рисунке слева, где перечислены все градиенты, кроме серого треугольничка в рамку взята белая область (прозрачная). Попробуйте заменить в градиентах прозрачный цвет на какой-то другой, более заметный, чтобы видеть все эти квадраты.

Как построено понимаю.

Плюс еще вопрос

Почему повторяется только сюрикен, если изображение (цельное) больше чем сюрикен?

1 лайк

Потому что есть background-size.