Thêm kênh alpha vào một màu đã cho

Question

Tôi có một cặp cạnh nhau mà tôi muốn tạo kiểu với CSS. Tôi muốn áp dụng một loạt các màu sắc cho nền, nhưng tôi muốn một thấp hơn để có cùng màu với giảm opacity, vì vậy tôi nghĩ về điều này:

span.foo{ 
    background-color: rgba(0,0,0,1); /*or whatever*/ 
    color:white; 
} 

span.foo:last-child{ 
    background-color: rgba(*,*,*,0.5); /*just an example*/ 
} 

Vì vậy, tôi muốn thay đổi độ mờ đục của nền đã được xác định mà không ảnh hưởng đến độ mờ của văn bản chỉ bằng cách sử dụng CSS3.

Điều này có khả thi không?

Answer 1

Tôi tin rằng không có cách nào để làm điều đó.

Css rất hạn chế, và bạn không thể làm gì với nó.

Cách duy nhất bạn có thể thêm opacity là:

opacity: 0.5 

Nhưng ở trên cũng sẽ ảnh hưởng đến các văn bản chính nó, không chỉ nền.

Tuy nhiên, bạn có thể bọc nó theo cách sẽ tách các khối nền khỏi văn bản, do đó sẽ giữ cho màu của văn bản bị ảnh hưởng.

EDIT: Xem fiddle: http://jsfiddle.net/YfSn7/30/

Nhưng điều đó có thể trông hơi vô lý, vì vậy tôi sẽ không có nhiều lời khuyên sử dụng nó.

Đoán bạn sẽ phải chấp nhận rằng điều này là không thể, nếu bạn thực sự muốn làm cho mọi việc đơn giản hơn thay vì làm phức tạp chúng.

Answer 2

Không có cách nào để thực hiện việc này, việc lặp lại quá nhiều giá trị là một trong những lỗi của CSS.

Vì vậy, nếu màu tiêu chuẩn của bạn là rgba(0,0,0,1); thì bạn sẽ cần rgba(0,0,0,0.5); làm phiên bản trong suốt.

Bạn có thể làm điều gì đó giống như phía máy khách này với một chút javascript, nhưng điều đó không chính xác rõ ràng.

Answer 3

Nó có thể được thực hiện bằng JavaScript như sau:

adjustHexOpacity (color, opacity) { 
    const r = parseInt(color.slice(1, 3), 16); 
    const g = parseInt(color.slice(3, 5), 16); 
    const b = parseInt(color.slice(5, 7), 16); 

    return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity + ')'; 

}