Sass: conversione di esadecimale in RGBa per l'opacità dello sfondo

213

Ho il seguente mixin Sass, che è una modifica semi completa di un esempio RGBa :

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

Ho fatto domanda $opacityok, ma ora sono bloccato con la $colorparte. I colori che invierò nel mixin saranno esadecimali non RGB.

Il mio esempio di utilizzo sarà:

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

Come posso usare i valori HEX all'interno di questo mixin?

— Rick Donohoe
fonte

415

La funzione rgba () può accettare un singolo colore esadecimale nonché valori RGB decimali. Ad esempio, questo funzionerebbe perfettamente:

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

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

Se mai hai bisogno di dividere il colore esadecimale in componenti RGB, tuttavia, puoi usare le funzioni rosso () , verde () e blu () per farlo:

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

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

— tramoggia
fonte

Giuro che ho provato questo E le funzioni r, b, g e non ha funzionato. Stavo usando i colori dinamici da un back-end Drupal anche se potrebbe aver rotto qualcosa. Tuttavia, l'ho risolto alla fine e la risposta che ho trovato dopo ulteriori ricerche +1

— Rick Donohoe

1

MA, qual è l'equivalente esadecimale di # ($ color + $ opacity)? - questo potrebbe essere utile. fattibile?

— Somedirection,

2

Per quanto ne so , RGBA aggiunge opacità , il che significa che puoi vedere elementi dietro di essa. Con lo standard hex, non puoi farlo.

— Richard Peck,

Grazie. Non avrei mai pensato di provare hex su rgb a!

— RayViljoen,

2

Meglio usare rgba($color, $alpha)come rgba(#000000, 0.6)il risultato è lo stesso e non è necessario reinventare la ruota. ;)

— barbarolico

118

C'è un mixin integrato: transparentize($color, $amount);

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

L'importo dovrebbe essere compreso tra 0 e 1;

Documentazione ufficiale di Sass (Modulo: Sass :: Script :: Funzioni)

— user3631047
fonte

1

Mi piace questo! Ottimo per l'implementazione del browser moderna.

— Mike Kormendy,

18

come nota a margine: l'importo di $ è quanto sottrarrà, non il valore che si desidera impostare

— MMachinegun

3

Ha funzionato alla grande, tranne che la quantità sembra essere il significato inverso che si desidera rendere 90%trasparente per ottenere il risultato.1

— Patrick Mencias-lewis

bizzarro. nessuno che non avesse letto la documentazione avrebbe mai sospettato che ci fosse una funzione "trasparente". molto utile, grazie!

— tobybot

Bella risposta. Questa dovrebbe essere la risposta accettata. Grazie. $colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5);ha funzionato per me.

— Ryan

34

SASS ha una funzione integrata rgba () per valutare i valori.

rgba($color, $alpha)

Per esempio

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

Un esempio usando le tue variabili:

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

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

Uscite:

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

— Reggie Pinkham
fonte

6

puoi provare questa soluzione, è il migliore ... 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);

— m.Elouafi
fonte

5

La tua risposta è buona ma sembra essere inutilmente complicata. Immagino che le sfumature trasparenti non siano pertinenti alla mia domanda, anche se puoi spiegare di cosa tratta la classe di sfondo trasparente? Presumo di non averne bisogno se non utilizzo il mixin di tonalità trasparenti?

— Rick Donohoe,

@RickDonohoe, per quanto ricordo, z-index: 1 e lo sfondo trasparente è un fallback per IE <9. Penso che m.Eloutafi lo abbia inserito in una classe separata, per un ulteriore utilizzo in altre esigenze. Guarda la riga in risposta dove inizia con "Da:" ...

— Roman M. Koss

2

Se è necessario mescolare il colore dalla trasparenza variabile e alfa e con soluzioni che includono la rgba()funzione si ottiene un errore simile

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

Qualcosa del genere potrebbe essere 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};

  }

}

— Vojtech
fonte