Đây có thể là La bàn 101, nhưng đã có ai viết một bản mixin đặt giá trị alpha của một màu chưa? Tốt nhất, tôi muốn mixin có bất kỳ hình thức định nghĩa màu nào và áp dụng độ trong suốt:
@include set-alpha( red, 0.5 ); //prints rgba(255, 0, 0, 0.5);
@include set-alpha( #ff0000, 0.5 ); //prints rgba(255, 0, 0, 0.5);
@include set-alpha( rgb(255,0,0), 0.5 ); //prints rgba(255, 0, 0, 0.5);
Câu trả lời:
Sử dụng rgbachức năng được tích hợp trong Sass
Đặt độ mờ của một màu.
Ví dụ:
rgba (# 102030, 0,5) => rgba (16, 32, 48, 0,5)
rgba (xanh lam, 0,2) => rgba (0, 0, 255, 0,2)Các thông số:
(Màu) màu
(Số) alpha - Một số từ 0 đến 1Trả lại:
(Màu)
Mã:
rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);
Tôi sử dụng plugin la bàn rgbapng
rgbapng là một plugin La bàn để cung cấp hỗ trợ RGBA tương thích trên nhiều trình duyệt *. Nó hoạt động bằng cách tạo nhanh các PNG trong suốt alpha pixel đơn cho các trình duyệt không hỗ trợ RGBA. Nó sử dụng thư viện Ruby ChunkyPNG thuần túy dẫn đến việc cài đặt và triển khai không phức tạp.
Tải về
gem install compass-rgbapng
Sử dụng
@include rgba-background(rgba(0,0,0,0.75));
Biên dịch sang:
background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);
Hàm rgba không hoạt động trên màu không trong suốt, nó trả về một hex một lần nữa. Rốt cuộc, nó không có nghĩa là chuyển đổi hex thành rgba, chúng tôi chỉ kiếm lợi nhuận từ hex không cho phép alpha (chưa).
rgba(#fff, 1) // returns #fff
Vì vậy, tôi đã thực hiện một số hàm nhỏ để tạo chuỗi rgb. Tôi không cần phải đối mặt với giấy trong suốt bây giờ.
@function toRGB ($color) {
@return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}
Ngoài ra còn có ie-hex-str () cho định dạng ## AARRGGBB của IE:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(#fdfdfd)}', endColorstr='#{ie-hex-str(#f6f6f6)}',GradientType=0); /* IE6-9 */
from_hex(hex_string, alpha = nil);
Từ tài liệu :
Tạo màu mới từ chuỗi hex CSS hợp lệ. Hàm băm hàng đầu là tùy chọn.