Sass/Compass - Convert Hex, RGB, or Named Color to RGBA

时光总嘲笑我的痴心妄想 提交于 2019-11-28 16:36:56
maxbeatty

Use the rgba function built into Sass

Sets the opacity of a color.

Examples:

rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)

Parameters:
(Color) color
(Number) alpha — A number between 0 and 1

Returns:
(Color)

Code:

rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);

I use the rgbapng compass plugin

rgbapng is a Compass plugin for providing cross-browser* compatible RGBA support. It works by creating single pixel alpha-transparent PNGs on the fly for browsers that don't support RGBA. It uses the pure Ruby ChunkyPNG library resulting in hassle-free installation and deployment.

Install

gem install compass-rgbapng

Usage

@include rgba-background(rgba(0,0,0,0.75));

Compiles to:

background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);

The rgba function doesn't work on color with no transparency, it returns an hex again. After all, it's not meant to transform hex to rgba, we're just making profit out of hex doesn't allow alpha (yet).

rgba(#fff, 1) // returns #fff

So, I made al little functions that buils the rgb string. I don't need to deal with transparencies for now.

@function toRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}

There's also ie-hex-str() for IE's ##AARRGGBB format:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(#fdfdfd)}', endColorstr='#{ie-hex-str(#f6f6f6)}',GradientType=0); /* IE6-9 */
user776411
from_hex(hex_string, alpha = nil);

From the documentation:

Create a new color from a valid CSS hex string. The leading hash is optional.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!