Щебетать бутстрап hex в rgba?

Ответ 1

Есть несколько встроенных функций в less.js и mixins из Bootstrap, которые вы можете использовать:

Это функция less.js:

// using a variable

@color: #f57e20;

.test {
  background: fade(@color, 50%); // return @color with 50% transparency
}

// or without the color variable

.test2 {
  background: fade(#f57e20, 50%); // return @color with 50% transparency
}

Это приводит к:

.test {
  background: rgba(245, 126, 32, 0.5);
}
.test2 {
  background: rgba(245, 126, 32, 0.5);
}

Или используйте загрузочный микс:

.test3 {
  #translucent > .background(#f57e20, 0.5); // use HSLA mixin
}

Результат:

.test3 {
  background-color: rgba(244, 123, 31, 0.5);
}

Я буду включать (фиксированный) код для translucent mixins здесь для целей архивирования, так как (последний раз я проверял) он больше не входит в Bootstrap 3.0.0:

// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
  .background(@color: @white, @alpha: 1) {
    background-color: fade(@color, @alpha);
  }
  .border(@color: @white, @alpha: 1) {
    border-color: fade(@color, @alpha);
    .background-clip(padding-box);
  }
}

Ответ 2

Вы можете попробовать:

background: rgba(red(@color), green(@color), blue(@color), @alpha);

Мне приходилось делать что-то подобное при написании быстрого микса, который использовал box-shadow.