0
background: conic-gradient(#000 0.25turn, #fff 0.25turn 0.5turn, #000 0.5turn 0.75turn, #fff 0.75turn) top left / 50% 6%;

Я не понимаю что делает top left / 50% 6%. Что это за синтаксис?

1 ответ 1

3

Ответ

Тут стоит понимать, что background это сокращение, для того чтобы сразу можно было установить несколько свойств. А именно background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, и background-attachment (порядок важен!).

Я не понимаю что делает top left / 50% 6%.

top Это установка свойства background-position-x которое указывает начало отрисвоки фона относительно оси X, right это свойство background-position-y соотвественно работает аналогично, но по оси Y

50% 6% это css свойство background-size, отвечает за размер фона, первое значение это ширина, а второе высота

Пример

Пока готовил ответ, накидал вам простенький пример для понимания работы свойства background-position

function changeBgPos(y, x) {
  document.body.style.backgroundPositionX = x;
  document.body.style.backgroundPositionY = y;
}
html,
body,
.block {
  height: 100%;
}

.block {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

body {
  background: url("https://i.imgur.com/pAG5V38.jpg") top left / 15% 25%;
  background-repeat: no-repeat;
  margin: 0;
}
<div class="block">
  <input value="top left" onclick="changeBgPos('top','left')" type="button">
  <input value="top right" onclick="changeBgPos('top','right')" type="button">
  <input value="bottom left" onclick="changeBgPos('bottom','left')" type="button">
  <input value="bottom right" onclick="changeBgPos('bottom','right')" type="button">
</div>

Совет

Для работы с такими сокращающими свойствами советую использовать Dev Tools в вашем браузере, кликнув по такому свойству вы увидите все его содержимое в удобном формате!

введите сюда описание изображения

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.