Làm cách nào để chuyển đổi màu thập lục phân sang rgba với trình biên dịch Ít hơn?

131

Tôi có đoạn mã sau:

@color : #d14836;

.stripes span {
    -webkit-background-size: 30px 30px;
    -moz-background-size: 30px 30px;
    background-size: 30px 30px;
    background-image: -webkit-gradient(linear, left top, right bottom,
        color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)),
        color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent),
        to(transparent));

Tôi cần chuyển đổi @colorsang rgba(209, 72, 54, 1).

Vì vậy, tôi cần thay thế rgba(209, 72, 54, 1)mã của mình bằng hàm Ít tạo rgba()giá trị từ @colorbiến của mình .

Làm thế nào tôi có thể làm điều này với Ít?

css less

— mũm mĩm
nguồn

3

Các hàm fadein / fadeout / fade không làm những gì bạn cần? lesscss.org/#reference

— cimmanon

348

Trên thực tế, ngôn ngữ Ít đi kèm với một chức năng nhúng được gọi là fade. Bạn vượt qua một đối tượng màu và độ mờ tuyệt đối% (giá trị cao hơn có nghĩa là không trong suốt):

fade(@color, 50%);   // Return @color with 50% opacity in rgba

— Ronald Pauffert
nguồn

42

@Soc đã trả lời câu hỏi của OP, nhưng bạn đã cho chúng tôi câu trả lời MỌI NGƯỜI ELSE đã đến đây để tìm! Cảm ơn bạn!

— BillyNair

1

Tôi nghĩ rằng tham số lượng không phải là mức độ trong suốt mà ngược lại chỉ định mức độ mờ?

— mousio

2

@mousio Trên thực tế, bằng cách chọn chính xác 50%, nó chính xác cả về độ trong suốt và độ mờ. :)

— Dem Pilafian

1

@mousio Nếu bạn muốn thực sự có kỹ thuật, tôi tin chính xác hơn là tỷ lệ của màu "mờ" hòa trộn với màu của từng pixel mà phần tử phủ lên - xem en.wikipedia.org/wiki/Alpha_compositing#Alpha_bleinating : ) Nhưng về mặt thực tế, tất nhiên bạn đúng; tỷ lệ phần trăm hoặc giá trị thập phân đại diện cho mức độ mờ đục, không phải mức độ trong suốt!

— Brian Lacy

5

Đối với bản ghi, đây là một lỗ hổng trong API. Tôi phải tìm kiếm nó mỗi khi tôi muốn sử dụng nó. Sẽ là khôn ngoan nếu họ kết hợp RGBA hiện tại vào một cuộc gọi LESS giống như SASS - rgba (@colorValue, .5) sao cho nó sẽ tạo ra bản lề chính xác giống như một tuyên bố rgba CSS thực tế. Nhưng này, đó là tôi đang than vãn. :)

— dudewad

105

Nếu bạn không cần khóa alpha, bạn chỉ cần sử dụng biểu diễn thập lục phân của màu. Màu rgba có alpha là '1' giống với giá trị thập lục phân.

Dưới đây là một số ví dụ để chứng minh rằng:

@baseColor: #d14836;

html {
    color: @baseColor;
    /* color:#d14836; */
}

body {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 1);
    /* color:#d14836; */
}

div {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 0.5);
    /* rgba(209, 72, 54, 0.5); */
}

span {
    color: fade(@baseColor, 50%);
    /* rgba(209, 72, 54, 0.5); */
}

h3 {
    color: fade(@baseColor, 100%)
    /* color:#d14836; */
}

Kiểm tra mã này trực tuyến: http://lesstester.com/

— Sebastian Stiehl
nguồn

Làm thế nào về lỗi này tôi nhận được? error evaluating function 'red': Cannot read property '0' of undefined

— Aldi Unanto

Điều này đã không được cập nhật trong một thời gian nhưng với Ít PHP hơn, tôi gặp phải lỗi sau -

@colorGold: color('#C6AF87');  .box {         background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); }

Lỗi là - Không thể biên dịch tệp CSS (screen.less): màu mong đợi cho màu đỏ (): thất bại tại `background-color: rgba ( đỏ (@colorGold), xanh lá cây (@colorGold), xanh lam (@colorGold), 0,3);

— Chris

1

@Chris bạn có thể gán màu trực tiếp để làm cho công việc này với Ít PHP hơn, có vẻ như nó cũng hoạt động với phiên bản ít hơn hiện tại để tôi điều chỉnh ví dụ. @colorGold: #C6AF87;

— Sebastian Stiehl

@Soc đây là giải pháp cuối cùng của tôi và tôi đã tìm thấy nó ngay sau khi tôi không biết điều gì đã mang lại cho tôi ấn tượng tôi cần để bọc nó trong các thẻ màu!

— Chris

Kiểm tra chức năng ít hơn của tôi, stackoverflow.com/questions/14860874/ từ

— helpse

12

Ít mixin của tôi:

.background-opacity(@color, @opacity) {
    @rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);

    background-color: @rgba-color;

    // Hack for IE8:
    background: none\9; // Only Internet Explorer 8
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // Internet Explorer 9 and down
    // Problem: Filter gets applied twice in Internet Explorer 9.
    // Solution:
    &:not([dummy]) {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); // Only IE9
    }
}

Thử nó.

EDITED: Như đã thấy trên nền rgba với bộ lọc IE thay thế: IE9 kết xuất cả hai! , Tôi đã thêm một số dòng vào mixin.

— giúp đỡ
nguồn

2

Có vẻ như với bản cập nhật Ít hơn 3.81 gần đây , bạn có thể sử dụng chỉ hai đối số trong hàm rgba ().

rgba(white, 0.3) or rgba(white, 30%) => rgba(255, 255, 255, 0.3)

Nó hoạt động với tôi, nhưng tôi không thể tìm thấy nó trong tài liệu chính thức .

— Dmitry Davydov
nguồn