Блог

Главная - Вопросы по программированию - Как получить изображение с двумя разными цветами

Как получить изображение с двумя разными цветами

#html #css

#HTML #css

Вопрос:

У меня есть изображение в HTML, и я хочу установить границу с 2 разными цветами (с разной шириной), вот пример:

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

Пока у меня есть этот код:

 <style>
#stream
        {
            border-style: solid;
            border-width: 0px 20px;
            border-left-color: #00b000;
            border-right-color: red;
            border-left-image: linear-gradient( 0deg, blue 80%, red 80.001%); /*Not working*/
        }
</style>
<img id="stream" src="bla.png">

Я пытался использовать линейный градиент, но это не так, как ожидалось (я не хотел исчезать).

Ответ №1:

Вы можете использовать элемент before и просто поместить прямоугольник за изображение: https://jsfiddle.net/y1e0wmgm /

 .multiborder {
    padding: 10px;
    background-color: #f00;
    display: inline-block;
    position: relative;

    amp;:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        background-color: #00f;
        height: 20%;
        width: 100%;
    }

    img {
        position: relative;
    }
}

Кстати, у вас была отличная идея с градиентным фоном. Просто нужно сделать изменение цвета более резким: https://jsfiddle.net/martingottweis/y1e0wmgm/1 /

 background: linear-gradient( 0deg, blue 80%, red 80.001%);

Комментарии:

1. Здравствуйте, большое вам спасибо за ваш ответ (и ваше исправление ошибок моего английского), я подумал о своей проблеме и обновил изображение. Именно то, что я хочу разработать, — это радиоуправляемый автомобиль с камерой (изображение — это поток камеры), а 2 границы представляют расстояние от радиоуправляемого автомобиля до препятствия (работает как лидар), как индикатор выполнения, но вертикально, но все, что я пытаюсь, не работает.работа, я действительно сожалею о моем английском, надеюсь, вы поняли

2. Вы ищете что-то вроде этого: jsfiddle.net/martingottweis/y1e0wmgm/2

Ответ №2:

Используйте свойство CSS3 border-image и выберите подходящее изображение, которое будет «обернуто вокруг изображения».

Смотрите: W3School и CSS Хитрости Вы также можете использовать вышеуказанные детали с синтаксисом SVG для создания динамических изображений границ,

Итак:

CSS
Border.png — это небольшой файл двух цветов, как описано в вашем вопросе. изображение.

 .module {
  border-image-source: url('/path/to/border.png');
  border-image-width: 20;
  border-image-outset: 1;
  border-image-repeat: space;
}

HTML

  <img src="bla.png" class='module'>