Элемент управления загрузочной каруселью — измените их на стрелку с фоном круга

#css #svg #bootstrap-4

#css #svg #bootstrap-4

Вопрос:

Я хотел бы изменить стили значков карусели начальной загрузки 4 со стрелок на стрелки с темными полупрозрачными кругами внизу.

Я понимаю, что сами значки являются svg, но я не уверен, как сделать svg или изменить их, чтобы делать то, что я хочу.

Это загрузочный код, который генерирует svg.

     .carousel-control-next-icon {
    background-image: url("data:image/svg xml,");
}
  

Ответ №1:

Вы можете изменить цвет значка непосредственно из файла SVG. Осмотрите деталь и измените цвет в атрибуте «заливка» на понравившийся вам цвет.

Вы также можете изменить цвет, добавив шестнадцатеричный цвет в » fill =’% 23fff’ » сверху css. например: fill=’#A0A0A0′ где ‘A0A0A0’ — это оттенок серого. Здесь ‘fff’ белый, а ‘000’ будет черным.

Или просто используйте инвертированный / оттенки серого css-фильтр в значке. например:

 .carousel-control-next{
    filter: invert(60%);
}