Nano Hash - криптовалюты, майнинг, программирование

Как установить обратный градиент в одной строке

Я исправил аналогичные проблемы с диагональным градиентом. Сейчас сложно с линейкой.

Я смог создать градиент с крестом

background: linear-gradient(to right, transparent 40%,#f00 50%,transparent 60%), 
            linear-gradient(to bottom, #fff 20%,#f00 50%,#fff 80%);

Я не могу создать градиент, который имеет в левой половине градиент к нижней части БЕЛЫЙ-КРАСНЫЙ, а в правой половине обратный градиент КРАСНЫЙ-БЕЛЫЙ.

Ниже показано, как я пытался его создать:

background: linear-gradient(to bottom, transparent 50%,#ff0 100%), 
            linear-gradient(to right, transparent 50%,#f00 100%);

Но желтая часть заполнена! Как я могу исправить эту ситуацию?

Это то, что я хочу:

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

html gradient css linear-gradients
04.01.2016

  • фрагмент исполняемого кода (например, jsfiddle) может быть полезен 04.01.2016
  • @HubertGrzeskowiak Я этого не знаю. Только с css нельзя? 04.01.2016
  • Используя такой сервис, как jsfiddle или codepen, вы можете предоставить минимальный работающий пример, который легко редактировать, а другим легко строить. 04.01.2016
  • Также будет полезно изображение, сделанное в Photoshop или Gimp, показывающее, что вы хотите получить. В нынешнем виде я должен признать, что понятия не имею, что вы пытаетесь сделать. 04.01.2016
  • Я добавил ссылку с изображением, которое я хочу. Я делаю это краской 04.01.2016
  • Ах хорошо. Как насчет наличия двух DIV слева и справа с соответствующими градиентами? 04.01.2016
  • Это мой последний шанс. Потому что у меня разные css, но один и тот же html для разных ситуаций. Если это возможно, я бы не стал изменять html. Является ли это возможным? 04.01.2016
  • @Harry Если вы видите ответ Седрика, он создал изображение с фрагментом 04.01.2016
  • @Harvester Да, я видел и добавил ответ со способом его создания с использованием одного элемента + фонового правила. Я смог увидеть изображение на своем телефоне. 04.01.2016

Ответы:


1

Этого вполне можно добиться, используя один элемент и одно фоновое правило. Просто задайте каждому из градиентов 50% размера контейнера по оси X, расположите один градиент слева, а другой справа, используя background-position, и остановите повторение градиента, установив значение для background-repeat как no-repeat.

div {
  height: 100px;
  background: linear-gradient(to top, red 10%, yellow 50%), linear-gradient(to bottom, red 10%, yellow 50%);
  /* background-size: 50% 100%; Ideally this should be enough but it leaves a white line in the middle in snippet for some reason and so use below setting */
  background-size: 50% 100%, calc(50% + 1px) 100%;
  background-position: 0% 0%, 100% 0%;
  background-repeat: no-repeat;
}
<div></div>

04.01.2016
  • Да! работает корректно! Просто (если это возможно, если нет, я, тем не менее, поставил вас как правильный ответ): можно ли сделать грандиозный переход также между двумя половинками? 04.01.2016
  • А, я не знал, что можно сопоставить несколько фонов по нескольким правилам, здорово. 04.01.2016
  • @ Гарри, мне очень жаль, но я не смог создать изображение. Однако если мы назовем первый желтый A, первый красный B (это первая строка). Во втором ряду есть C (красный) и D желтый. Ну, у меня есть градиент для перехода от A к C, у меня есть градиент для перехода от B к D. Возможно ли иметь еще один градиент для перехода от A к B и от C к D? 04.01.2016
  • @Harvester: Нет, этого было бы почти невозможно достичь даже с несколькими элементами из-за того, какими будут промежуточные состояния. Например, верхняя часть слева — желтая, верхняя часть справа — красная, и мы можем плавно переходить между ними, но как насчет средней области с обеих сторон? Они оба находятся между цветами, поэтому вы не можете много переходить туда. 04.01.2016

    • 2

    Изменить: можно с одним background, см. ответ Гарри.

    Это невозможно напрямую с одним правилом background для вашего элемента, но вы можете использовать псевдоэлементы ::before и ::after.

    div {
  width: 100%;
  height: 50px;
  border: 1px solid black;
  position: relative;
  background: linear-gradient(to bottom, red 0%, #ff0 100%);
}
div::before {
  content: "";
  position: absolute;
  left: 50%;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to top, red 0%, #ff0 100%);
}
    <div></div>

    04.01.2016
  • теоретически мне нужен градиент также в линейном градиенте вправо. Но я создаю образ красками. 04.01.2016
  • И мой div - заголовок. Этот код не работает к сожалению 04.01.2016
  • Harvester, измените «div» в его коде на «header», и он будет работать. 04.01.2016
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..