texto - opacidad imagen de fondo css

Sass-Conversión de maleficio a RGBa para la opacidad de fondo

Question

Tengo la siguiente mezcla de Sass, que es una modificación a la mitad de un ejemplo de RGBa :

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

He aplicado $opacity ok, pero ahora estoy atrapado con la parte $color . Los colores que enviaré a Mixin serán HEX, no RGB.

Mi uso de ejemplo será:

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

¿Cómo puedo usar los valores HEX dentro de este mixin?

Answer 1

Hay una mezcla integrada: transparentize($color, $amount);

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

La cantidad debe estar entre 0 a 1;

Documentación oficial de Sass (Módulo: Sass :: Script :: Funciones)

Answer 2

La función rgba () puede aceptar un solo color hexadecimal así como valores RGB decimales. Por ejemplo, esto funcionaría bien:

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

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

Sin embargo, si alguna vez necesita dividir el color hexadecimal en componentes RGB, puede usar las funciones red() , green() y blue() para hacerlo:

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

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

Answer 3

SASS tiene una función incorporada de rgba () para evaluar valores.

rgba($color, $alpha)

P.ej

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

Un ejemplo usando tus propias variables:

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

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

Productos:

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

Answer 4

puedes probar esta solución, es la mejor ... url ( github )

// Transparent Background
// From: http://.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);