Sass - Преобразование Hex в RGBa для прозрачности фона


213

У меня есть следующий миксин Sass, который является половинной модификацией примера RGBa :

@mixin background-opacity($color, $opacity: .3) {
    background: rgb(200, 54, 54); /* The Fallback */
    background: rgba(200, 54, 54, $opacity);
} 

Я подал заявку $opacityхорошо, но теперь я застрял с этой $colorчастью. Цвета, которые я буду отправлять в миксин, будут HEX, а не RGB.

Мой пример использования будет:

element {
    @include background-opacity(#333, .5);
}

Как я могу использовать значения HEX в этом миксине?

Ответы:


415

Функция rgba () может принимать один шестнадцатеричный цвет, а также десятичные значения RGB. Например, это будет работать просто отлично:

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}

element {
     @include background-opacity(#333, 0.5);
}

Если вам когда-нибудь понадобится разбить шестнадцатеричный цвет на компоненты RGB, вы можете использовать для этого функции red () , green () и blue () :

$red: red($color);
$green: green($color);
$blue: blue($color);

background: rgb($red, $green, $blue); /* same as using "background: $color" */

Клянусь, я попробовал это И функции r, b, g, и это не сработало. Я использовал динамические цвета из бэкэнда Drupal, которые, возможно, что-то сломали. Тем не менее, в конце разобрали его и ответ, который я нашел после дальнейших исследований +1
Рик Донохо,

1
НО, что такое шестнадцатеричный эквивалент # ($ color + $ opacity)? - это может быть полезно. выполнимо?
Somedirection

2
Насколько мне известно, RGBA добавляет непрозрачность , то есть вы можете видеть элементы, стоящие за ней. Со стандартным hexвы не можете сделать это.
Ричард Пек

Спасибо. Никогда бы не подумал попробовать rgb a!
RayViljoen

2
Лучше использовать rgba($color, $alpha)лайк, так rgba(#000000, 0.6)как результат тот же, и нет необходимости изобретать велосипед. ;)
бартолик

118

Есть встроенный миксин: transparentize($color, $amount);

background-color: transparentize(#F05353, .3);

Сумма должна быть от 0 до 1;

Официальная документация Sass (Модуль: Sass :: Script :: Functions)


1
Мне это нравится! Отлично подходит для современной реализации браузера.
Майк Корменди

18
в качестве примечания: сумма $ это то, сколько она будет вычитать, а не значение, которое вы хотите установить
MMachinegun


странно. никто, кто не читал документацию, никогда бы не заподозрил, что есть функция «транспарентизации». очень полезно, хотя, спасибо!
tobybot

Отличный ответ. Это должен быть принятый ответ. Спасибо. $colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5);работал на меня.
Райан

34

SASS имеет встроенную функцию rgba () для оценки значений.

rgba($color, $alpha)

Например

rgba(#00aaff, 0.5) => rgba(0, 170, 255, 0.5)

Пример использования ваших собственных переменных:

$my-color: #00aaff;
$my-opacity: 0.5;

.my-element {
  color: rgba($my-color, $my-opacity);
}

Выходы:

.my-element {
  color: rgba(0, 170, 255, 0.5);
}

6

Вы можете попробовать это решение, является лучшим ... URL ( GitHub )

// Transparent Background
// From: http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8

// Extend this class to save bytes
.transparent-background {
  background-color: transparent;
  zoom: 1;
}

// The mixin
@mixin transparent($color, $alpha) {
  $rgba: rgba($color, $alpha);
  $ie-hex-str: ie-hex-str($rgba);
  @extend .transparent-background;
  background-color: $rgba;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
}

// Loop through opacities from 90 to 10 on an alpha scale
@mixin transparent-shades($name, $color) {
  @each $alpha in 90, 80, 70, 60, 50, 40, 30, 20, 10 {
    .#{$name}-#{$alpha} {
      @include transparent($color, $alpha / 100);
    }
  }
}

// Generate semi-transparent backgrounds for the colors we want
@include transparent-shades('dark', #000000);
@include transparent-shades('light', #ffffff);

5
Ваш ответ хороший, но кажется слишком сложным. Я предполагаю, что прозрачные оттенки не имеют отношения к моему вопросу, хотя вы можете объяснить, что такое класс прозрачного фона? Я полагаю, мне это не нужно, если я не использую mixin с прозрачными оттенками?
Рик Донохо

@RickDonohoe, насколько я помню, z-index: 1, а прозрачный фон - это запасной вариант для IE <9. Я думаю, что м.Элутафи выделил это в отдельный класс для дальнейшего использования в других целях. Смотрите строку ответа, где она начинается с "От:" ...
Роман М. Косс

2

Если вам нужно смешать цвет из переменной и альфа-прозрачности, а также с решениями, которые включают rgba()функцию, вы получите ошибку вроде

      background-color: rgba(#{$color}, 0.3);
                       ^
      $color: #002366 is not a color.
   
          background-color: rgba(#{$color}, 0.3);
                            ^^^^^^^^^^^^^^^^^^^^

Нечто подобное может быть полезным.

$meeting-room-colors: (
  Neumann: '#002366',
  Turing: '#FF0000',
  Lovelace: '#00BFFF',
  Shared: '#00FF00',
  Chilling: '#FF1493',
);
$color-alpha: EE;

@each $name, $color in $meeting-room-colors {

  .#{$name} {

     background-color: #{$color}#{$color-alpha};

  }

}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.