Sass - Conversion de Hex en RGBa pour l'opacité de l'arrière-plan


213

J'ai le mixin Sass suivant, qui est une modification à moitié complète d'un exemple RGBa :

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

J'ai appliqué $opacityok, mais maintenant je suis coincé avec la $colorpartie. Les couleurs que j'enverrai dans le mixage seront HEX et non RGB.

Mon exemple d'utilisation sera:

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

Comment puis-je utiliser les valeurs HEX dans ce mixin?

Réponses:


415

La fonction rgba () peut accepter une seule couleur hexadécimale ainsi que des valeurs RVB décimales. Par exemple, cela fonctionnerait très bien:

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

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

Si vous avez besoin de diviser la couleur hexadécimale en composants RVB, vous pouvez utiliser les fonctions rouge () , vert () et bleu () pour le faire:

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

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

Je jure que j'ai essayé ceci ET les fonctions r, b, g et cela n'a pas fonctionné. J'utilisais des couleurs dynamiques d'un back-end Drupal, ce qui peut avoir cassé quelque chose. Pourtant, trié à la fin et la réponse que j'ai trouvée après de nouvelles recherches +1
Rick Donohoe

1
MAIS, quel est l'équivalent hexadécimal de # ($ color + $ opacity)? - cela pourrait être utile. faisable?
direction

2
À ma connaissance, RGBA ajoute de l' opacité , ce qui signifie que vous pouvez voir des éléments derrière. Avec la norme hex, vous ne pouvez pas faire cela.
Richard Peck

Merci. N'aurais jamais pensé essayer hex sur rgb a!
RayViljoen

2
Mieux vaut l'utiliser rgba($color, $alpha)comme rgba(#000000, 0.6)le résultat est le même et il n'est pas nécessaire de réinventer la roue. ;)
lbartolic

118

Il existe un mixage intégré: transparentize($color, $amount);

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

Le montant doit être compris entre 0 et 1;

Documentation officielle de Sass (Module: Sass :: Script :: Functions)


1
J'aime ça! Idéal pour la mise en œuvre d'un navigateur moderne.
Mike Kormendy

18
en remarque: le montant en $ est la somme qu'il va soustraire, pas la valeur que vous souhaitez définir
MMachinegun

3
A très bien fonctionné, sauf que le montant semble être l'inverse, ce qui signifie que vous voulez le rendre 90%transparent pour obtenir le résultat.1
Patrick Mencias-lewis

bizarre. personne qui n'a pas lu la documentation ne soupçonnera jamais qu'il existe une fonction de "transparence". très utile cependant, merci!
tobybot

Très bonne réponse. Cela devrait être la réponse acceptée. Merci. $colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5);travaillé pour moi.
Ryan

34

SASS a une fonction rgba () intégrée pour évaluer les valeurs.

rgba($color, $alpha)

Par exemple

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

Un exemple utilisant vos propres variables:

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

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

Les sorties:

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

6

vous pouvez essayer cette solution, est la meilleure ... 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
Votre réponse est bonne mais semble être inutilement compliquée. Je suppose que les nuances transparentes ne sont pas pertinentes pour ma question, bien que pouvez-vous expliquer en quoi consiste la classe d'arrière-plan transparent? Je suppose que je n'en ai pas besoin si je n'utilise pas le mixin transparent-shades?
Rick Donohoe

@RickDonohoe, pour autant que je m'en souvienne, z-index: 1, et le fond transparent est un repli pour IE <9. Je pense que m.Eloutafi a mis cela dans une classe séparée, pour une utilisation ultérieure dans d'autres besoins. Regarder la ligne en réponse où il commence par "From:" ...
Roman M. Koss

2

Si vous devez mélanger la couleur à partir de la transparence variable et alpha, et avec des solutions qui incluent une rgba()fonction, vous obtenez une erreur comme

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

Quelque chose comme ça pourrait être utile.

$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};

  }

}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.