[css] Sass - Converting Hex to RGBa for background opacity

you can try this solution, is the best... 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);

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to sass

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0 How to fix ReferenceError: primordials is not defined in node Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist` What is the difference between CSS and SCSS? Angular-cli from css to scss Why don’t my SVG images scale using the CSS "width" property? Angular CLI SASS options Error: Cannot find module 'gulp-sass' How to compile or convert sass / scss to css with node-sass (no Ruby)? Try reinstalling `node-sass` on node 0.12?

Examples related to background-color

SwiftUI - How do I change the background color of a View? How to add a color overlay to a background image? How to change the background color on a input checkbox with css? How to change DatePicker dialog color for Android 5.0 Set Background color programmatically How to change the background-color of jumbrotron? Set textbox to readonly and background color to grey in jquery Change the background color of a pop-up dialog Background color of text in SVG Change background color of iframe issue

Examples related to mixins

Sass - Converting Hex to RGBa for background opacity Syntax for if/else condition in SCSS mixin What is a mixin, and why are they useful?

Examples related to rgba

Overlay a background-image with an rgba background-color Sass - Converting Hex to RGBa for background opacity Convert RGBA PNG to RGB with PIL CSS hexadecimal RGBA? CSS background opacity with rgba not working in IE 8