Background css linear gradient: linear-gradient() — CSS: Cascading Style Sheets

Цвет линейного градиента CSS темнеет на мобильной iOS по сравнению с основными браузерами для настольных ПК

спросил 1 год, 7 месяцев назад

Изменено 1 год, 6 месяцев назад

Просмотрено 557 раз

Я обнаружил странную проблему, связанную с отображением прозрачности линейно-градиентных цветов фона на разных платформах.

Два принтскрина ясно показывают разницу. Первое изображение сделано в популярном настольном браузере, второе — в популярном мобильном браузере.

 nav li {фон: линейный градиент (влево, прозрачный, rgba (220 170 80/1))}
nav li {фон: линейный градиент (влево, прозрачный, rgba (210 190 50/1))}
nav li {фон: линейный градиент (влево, прозрачный, rgba (180 190 90/1))}
 

---

В Windows Chrome, Firefox, Opera, Vivaldi и Edge отображается хорошо, как и должно:

---

Однако в Safari iOS на мобильном iPhone и планшете iPad градиентная полоса выглядит по-разному: она начинается хорошо, а заканчивается также прозрачно, но все между ними выглядит темным, тусклым и бесцветным! 🙁

---

Вопрос : Что нужно сделать, чтобы на мобильной iOS градиент вел себя точно так же, а именно, переходил в прозрачность (без определения цвета, 100% прозрачность!) так же, как и в других основных браузерах?

• css
• градиент
• прозрачность
• фоновый цвет
• линейный градиент

3

Не используйте прозрачное значение в градиентах CSS. iOS предполагает, что «прозрачный» означает «черный прозрачный» или rgba(0,0,0,0) . Вместо этого переключите его на прозрачную версию используемого вами цвета, например, rgba(220 170 80/0) .

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Изменение фона цветовой темы на градиент в Squarespace 7.

1 | Уилл-Майерс

Вопрос:
Мы на SquareSpace 7.1. Интересно, можно ли изменить код, чтобы одна «цветовая тема» могла иметь градиентный фон каждый раз, когда мы применяем эту цветовую тему.

— Орапан

Это видео мой ответ.

См. код

Примечание: одна вещь, которую я не упомянул в этом видео, это то, что если вы хотите изменить основную цветовую тему на градиентную, CSS немного отличается. Чтобы изменить их основной цвет, проверьте первый вариант ниже.

Градиенты — это отличный способ добавить на ваш веб-сайт различные небольшие элементы, чтобы выйти за рамки стандартных веб-сайтов. Я предостерегаю от их чрезмерного использования, поскольку иногда это может затруднить чтение веб-сайта, но когда градиенты применяются надлежащим образом, они выглядят великолепно.

Если вы ищете подробный обзор градиентов в CSS, ознакомьтесь с этой статьей.

Давайте быстро разберем свойство линейного градиента на простом английском языке. Вот пример, который мы будем использовать:

.
  фоновое изображение: линейный градиент (
    направо,
    белый 0%,
    коричневый 100%
  )
 

Применение фонового изображения с линейным градиентом. Начните градиент с левой стороны и переместите вправо. Нанесите белый цвет на расстоянии 0 % от исходного положения (полностью слева) и смешайте его с коричневым на расстоянии 100 % от исходного положения (полностью справа).

Конечно, лучший способ понять эти вещи — просто добавить их на свой сайт и поиграть.

Ниже приведены мои основные «вещи, которые следует помнить» при использовании градиентов.

• Градиенты в CSS устанавливаются как background-image , а не background или background-color .
• В свойстве linear-gradient() используются скобки, и вы можете добавить разрывы строк после скобок, чтобы сделать код более читабельным (см. пример ниже).
• Первое значение, вызываемое в скобках linear-gradient() , — это направление. linear-gradient() может принимать простой язык в качестве значения здесь, и это то, что я использую в 99% случаев. (пример: «вправо», «влево», «влево вверх», «вправо вниз»)
• Вы можете добавить столько цветов и процентов, сколько захотите, просто убедитесь, что каждый процент увеличивается.

Измени свой…

ОСНОВНАЯ ЦВЕТНАЯ ТЕМА ДЛЯ ГРАДИЕНТА

 
 :not(.has-background) .section-background {
  фоновое изображение: линейный градиент (
    направо,
    белый 0%,
    коричневый 100%
  )
} 
  

Белая минимальная цветовая тема для градиента

 
 .white:not(.has-background) .section-background {
  фоновое изображение: линейный градиент (
    направо,
    белый 0%,
    коричневый 100%
  )
} 
 

Белая жирная цветовая тема для градиента

 
 . white-bold:not(.has-background) .section-background {
  фоновое изображение: линейный градиент (
    направо,
    белый 0%,
    коричневый 100%
  )
} 
 

Светлая минимальная цветовая тема для градиента

 
 .light:not(.has-background) .section-background {
  фоновое изображение: линейный градиент (
    направо,
    белый 0%,
    коричневый 100%
  )
} 
 

Светлая жирная цветовая тема для градиента

 
 .light-bold: not (.has-background) .section-background {
  фоновое изображение: линейный градиент (
    направо,
    белый 0%,
    коричневый 100%
  )
} 
 

Темная минимальная цветовая тема для градиента

 
 .dark:not(.has-background) .section-background {
  фоновое изображение: линейный градиент (
    направо,
    белый 0%,
    коричневый 100%
  )
} 
 
  

Темный полужирный цвет Тема для градиента

 .