- webkit-linear-gradient CSS функционирует с небольшим количеством стоимости, но не функционирует со многими

У меня есть эта линия

-webkit-linear-gradient(-20deg, #F15A24 87%, transparent 13%);

Функционируй хорошо!!

Но когда я пробую с большим количеством стоимости, он это вредит

-webkit-linear-gradient(49deg, #575757 52px, #f6f6f6 39px, #092432 429px, #736357 173px, #727272 172px, #FFFFFF 491px, #FFFFFF 530px, #092432 480px, #FFFFFF 50px, #E6E6E6 252px, #092432 1075px);

Также уже пробуйте с процентным содержанием

-webkit-linear-gradient(49deg, #575757 1.38925995191%, #f6f6f6 1.04194496393%, #092432 11.4613946033%, #736357 4.62196099386%, #727272 4.59524445632%, #FFFFFF 13.1178199305%, #FFFFFF 14.1597648945%, #092432 12.8239380176%, #FFFFFF 1.33582687684%, #E6E6E6 6.73256745926%, #092432 28.720277852%);

Результат продолжает быть тем же самым.

Как я могу добиваться этого с CSS или JQuery?

Идея состоит в том, чтобы рисовать body различных цветов размера элементов, которые у меня есть в center в 1024px, и в разрешение верхний был виден контраст.

1
задан 21.06.2017, 01:07
2 ответа

Что вредит linear-gradient ()?

Я не вижу, что он немного повредил в твоем примере, просто так функционируй.

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

Ты можешь видеть спецификацию здесь: https://drafts.csswg.org/css-images-3/#color-stop-syntax


Чтобы это понимать более легкий давайте делать пример:

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(to right, red, blue 100px, yellow 200px, green);
}
<div></div>

Здесь я создал перепад, что идет с левой стороны до правой стороны, с красным в положении 0, синий цвет в 100px, желтый в 100px и зелень в конце концов.


div {
  width: 300px;
  height: 200px;
  background: linear-gradient(to right, red, blue 100px, yellow 50px, green);
}
<div></div>

На этот второй пример только я изменил положение желтого цвета, в 50px, эта стоимость ниже предыдущего положения (положение синего цвета), которое 100px. Выполняя то, что говорит спецификацию, что мы видим, состоит в том, что желтый находится в положении самом большем из предыдущих элементов, в этом случае 100px синего цвета (красный - в 0px).


У меня не остается очень ясным, что то, чего ты хочешь добиться, но если ты хочешь сделать это с linear-gradient, - более легкое, если ты используешь положения в восходящей команде:

div {
  width: 400px;
  height: 200px;
  background: linear-gradient(49deg, red 20px, pink 50px, blue 100px, yellow 200px, orange 300px, green 350px);
}
<div></div>

Последняя деталь, которая наблюдается в этом третьем примере, состоит в том, что единственные цвета, у которых может быть "твердая" часть, - первый и последний, всякий раз когда ты использовал положение, иначе перепад будет инициализироваться с 0px и закончится в 100 % контейнера.

1
ответ дан 24.11.2019, 13:08
  • 1
    Тогда, как в моем первом одиноком примере у первого цвета и последнего могут быть porci и # 243; n " solida"? Тогда поскольку мне могло бы удаваться сделать что-либо подобное htmlcolorcodes.com/assets/images/… с linear-gradient? – eliasRuizHz 12.10.2016, 20:13
  • 2
    Ответ на первый вопрос est и # 225; во включенная в explicaci и # 243; n наверху. Относительно второго вопроса, не возможно, так как это как таковой перепад. – Shaz 12.10.2016, 20:18

.test{
  height:400px;
  background: linear-gradient(49deg, #575757 52px, #f6f6f6 39px, #092432 429px, #736357 173px, #727272 172px, #FFFFFF 491px, #FFFFFF 530px, #092432 480px, #FFFFFF 50px, #E6E6E6 252px, #092432 1075px);
}
<div class="test">
<div>

В меня я функционирует хорошо (firefox). Смотри, prefix ли-webkit это.

Пытается с этим инструментом: http://www.colorzilla.com/gradient-editor/ дает Тебе правила для всех браузеров.

1
ответ дан 24.11.2019, 13:08