CSS тень белая линия в конце линейно-градиентного фона - PullRequest
Новая
       58

CSS тень белая линия в конце линейно-градиентного фона

0 голосов
/ 15 мая 2018

Я пытаюсь создать красивый градиент в CSS, как этот, встроенный в PhotoShop: enter image description here

Но когда я пытаюсь создать его в CSS, я всегда получаю белыйлиния в конце линейно-градиентного фона: 

<html>
<head>

  <style>
    html, body {
      margin:  0;
      padding:  0;
      width: 100%;
      height: 100%;
    }
    body {

      background: transparent;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
  </style>
  
</head>
<body>
</body>
</html>
Окончание так:

PhotoshopCSS with the white line

Подлежит полному пониманию: строкане реально, это контр-эффект моего градиента, это фальшивая линия!но это все еще то, что я хочу стереть.Я уверен, что в CSS есть что-то лучше, не так ли?

Ответы [ 4 ]

0 голосов
/ 07 января 2019

Изменение 

background: -webkit-linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%);

до 

background: -webkit-linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 100%);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 100%);
0 голосов
/ 16 мая 2018

Благодаря @ user2796515 я смог найти то, что мне показалось неправильным в моем линейном градиенте: это потому, что нет никакого замедления, когда он заканчивается. Конечно, это линейно по определению ... Как бы то ни было, я знал, какие ключевые слова мне нужно было добавить в Google, чтобы попытаться добавить правильный кубический Безье к линейному градиенту, и я упал на эту статью из CSS Tricks , объясняющую именно мои чувства. Я знаю, что можете использовать этот postcss-easing -dient-плагин , и результат для меня идеален и полностью настраиваем!

enter image description here

0 голосов
/ 07 января 2019

Это не фактическая линия, это просто результат градиентного фона.Вы можете стереть его, назначив прозрачную границу контейнеру с градиентным фоном.Это решение работает для меня каждый раз.например, background: linear-gradient(110deg, #017baa 0%, #017baa 0%, #2d4f37 100%, #2d4f37 100%); border-top: 1px solid transparent; background-clip: content-box;

0 голосов
/ 16 мая 2018

Этот код имеет желаемые настройки (наполовину вниз по странице) для градиента: 

   background: white;
      background: -webkit-linear-gradient(rgba(1,1,1,.74) 1%, rgba(24,54,85,1) 13%, rgba(255,255,255,1) 50%);
      background: -moz-linear-gradient(rgba(1,1,1,.74)1%, rgba(24,54,85,1) 13%, rgba(255,255,255,1) 50%);
      background: -o-linear-gradient(rgba(1,1,1,.74) 1%, rgba(24,54,85,1) 13%, rgba(255,255,255,1) 50%);
      background: linear-gradient(rgba(1,1,1,.74) 1%, rgba(24,54,85,1) 13%, rgba(255,255,255,1) 50%);

Пожалуйста, см. Отредактированную скрипку: https://jsfiddle.net/8k0L5u6c/2/

...