Yazabileceğini biliyorum ...

background-color: #ff0000;

... kırmızı olan bir şey istiyorsan.

Ve yazabilirsiniz ...

background-color: rgba(255, 0, 0, 0.5);

... kırmızı ve yarı saydam bir şey istiyorsanız.

Onaltılı olarak kısmen saydam renkler yazmanın kısa bir yolu var mı? Gibi bir şey istiyorum:

background-color: #ff000088; <--- the 88 is the alpha

... ya da ...

background-color: #ff0000 50%;

Tüm renklerimi onaltılı olarak alıyorum ve hepsini ondalık 0-255 ölçeğine dönüştürmek zorunda kalıyorum can sıkıcı.

CSS Renk Modülü Seviye 4 muhtemelen 4 ve 8 basamaklı onaltılık RGBA gösterimini destekleyecektir!

Üç hafta önce (18 Aralık 2014) CSS Renk Modülü 4. Seviye editörünün taslağı CSS W3C Çalışma Grubuna sunuldu. Değişime son derece duyarlı bir durumda olsa da, belgenin mevcut sürümü biraz daha yakın gelecekte CSS'nin hem 4 hem de 8 basamaklı onaltılık RGBA gösterimini destekleyeceğini ima eder .

Not: Aşağıdaki alıntıda alakasız parçalar kesilmiş ve kaynak bunu okuduğunuz zamana göre büyük ölçüde değiştirilmiş olabilir (yukarıda belirtildiği gibi, kesinleşmiş bir belge değil, bir editörün taslağıdır).
İşler büyük ölçüde değiştiyse, lütfen bu yanıtı güncelleyebilmem için bana bildiren bir yorum bırakın!

§ 4.2. RGB onaltılık gösterimleri: #RRGGBB

A sözdizimi , değeri 3, 4, 6 veya 8 onaltılık basamaktan oluşan<hex-color> bir <hash-token>simgedir . Başka bir deyişle, onaltılık renk karma karakter olarak "#" yazılır, ardından bir dizi rakam veya harf gelir ( harflerin durumu önemli değildir - aynıdır ).0-9a-f#00ff00#00FF00

8 basamak

İlk 6 hane, 6 haneli gösterimle aynı şekilde yorumlanır. Onaltılı sayı olarak yorumlanan son basamak çifti rengin alfa kanalını belirtir, burada 00tamamen saydam bir rengi fftemsil eder ve tamamen opak bir rengi temsil eder.

Örnek 3
Başka bir deyişle, (biraz saydam mavi) ile #0000ffccaynı rengi temsil eder rgba(0, 0, 100%, 80%).

4 hane

Bu, 8 basamaklı gösterimin daha kısa bir çeşididir, 3 basamaklı gösterimle aynı şekilde "genişletilmiş". Onaltılı sayı olarak yorumlanan ilk basamak, rengin kırmızı kanalını belirtir; burada 0minimum değeri ve fmaksimum değeri temsil eder. Sonraki üç basamak sırasıyla yeşil, mavi ve alfa kanallarını temsil eder.

Bu, CSS renklerinin geleceği için ne anlama geliyor?

Bu, Düzey 4 belgesinden tamamen kaldırılmadığını varsayarsak, RGBA renklerimizi (veya bu adamlardan biriyseniz HSLA renklerini ) Rengi destekleyen tarayıcılarda onaltılık biçimde tanımlayabileceğimiz anlamına gelir. Modül Seviye 4'ün sözdizimi.

Misal

elem {
    background: rgb(0, 0, 0);           /* RGB notation (no alpha). */
    background: #000;                   /* 3-digit hexadecimal notation (no alpha). */
    background: #000000;                /* 6-digit hexadecimal notation (no alpha). */
    background: rgba(0, 0, 0, 1.0);     /* RGBA notation. */

    /* The new 4 and 8-digit hexadecimal notation. */
    background: #0000;                  /* 4-digit hexadecimal notation. */
    background: #00000000;              /* 8-digit hexadecimal notation. */
}

Bunu müşteriye dönük ürünlerimde ne zaman kullanabilirim?

Tüm şakalar bir yana: şu anda sadece 2015'in başlangıcıdır, bu nedenle bunlar henüz bir süre için herhangi bir tarayıcıda desteklenmeyecektir - ürününüz yalnızca en güncel tarayıcılarda çalışacak şekilde tasarlanmış olsa bile yakında bir üretim tarayıcısında bunu görmüyorum.

#RRGGBBAA renk gösterimi için mevcut tarayıcı desteğini görüntüle

Bununla birlikte, CSS'nin çalışma şekli, bunları bugün kullanmaya başlayabileceğimiz anlamına geliyor! Bunları şimdi kullanmaya gerçekten başlamak istiyorsanız, geri dönüşü eklediğiniz sürece, desteklenmeyen tarayıcılar geçerli olarak kabul edilene kadar yeni özellikleri görmezden gelir:

figure {
  margin: 0;
  padding: 4px;
  
  /* Fall back (...to browsers which don't support alpha transparency). */
  background: #FEFE7F;
  color: #3F3FFE;
  
  /* Current 'modern' browser support. */
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
  
  /* Fall... foward? */
  background: #ffff007F; /* Or, less accurately, #ff08 */
  color: #0000ffbe;      /* Or #00fc */
}

<figure>Hello, world!</figure>

Bu yanıtı CSS'deki backgroundve colorözelliklerini destekleyen bir tarayıcıda görüntülediğiniz sürece <figure>, yukarıdaki snippet'in sonucu olan öğe buna çok benzeyecektir:

Öğemizi incelemek için Windows'ta en yeni Chrome sürümünü (v39.0.2171) kullanarak <figure>aşağıdakileri göreceğiz:

6 basamaklı onaltılık geri dönüş rgba()değerler tarafından geçersiz kılınır ve şu anda Chrome'un CSS ayrıştırıcısı tarafından geçersiz sayıldığı için 8 basamaklı onaltılık değerlerimiz yok sayılır. Tarayıcımız bu 8 basamaklı değerleri desteklediği anda bunlar geçersiz kılınır rgba().

GÜNCELLEME 2018-07-04: Firefox, Chrome ve Safari şimdi bu gösterimi destekliyor, Edge hala eksik ama muhtemelen takip edecek ( https://caniuse.com/#feat=css-rrggbbaa ).

Soruyu geliştirmeyi gönderdikten sonra cevabı buldum. Afedersiniz!

MS Excel yardımcı oldu!

% değeri olarak eşdeğer opaklığa sahip bir alfa eklemek için Onaltılık öneki onaltılık renk değerine eklemeniz yeterlidir.

(rbga'da opaklık yüzdesi yukarıda belirtildiği gibi ondalık olarak ifade edilir)

Opacity %   255 Step        2 digit HEX prefix
0%          0.00            00
5%          12.75           0C
10%         25.50           19
15%         38.25           26
20%         51.00           33
25%         63.75           3F
30%         76.50           4C
35%         89.25           59
40%         102.00          66
45%         114.75          72
50%         127.50          7F
55%         140.25          8C
60%         153.00          99
65%         165.75          A5
70%         178.50          B2
75%         191.25          BF
80%         204.00          CC
85%         216.75          D8
90%         229.50          E5
95%         242.25          F2
100%        255.00          FF

RGB='#ffabcd';
A='0.5';
RGBA='('+parseInt(RGB.substring(1,3),16)+','+parseInt(RGB.substring(3,5),16)+','+parseInt(RGB.substring(5,7),16)+','+A+')';

Buraya bakın http://www.w3.org/TR/css3-color/#rgba-color

Muhtemelen mümkün değildir, çünkü 0xFFFFFFFF 32 bit tamsayılar için maksimum değerden daha büyüktür

Chrome 52+ , alfa hex'i destekler :

background: #56ff0077;

Kullanım red, green, blueRGBA dönüştürme:

background-color: rgba(red($color), green($color), blue($color), 0.2);

Korkarım bu mümkün değil. rgbaBildiğiniz biçimi sadece bir tanesidir.

DAHA AZ kullanabiliyorsanız, bir solma işlevi vardır.

@my-opaque-color: #a438ab;
@my-semitransparent-color: fade(@my-opaque-color, 50%);

background-color:linear-gradient(to right,@my-opaque-color, @my-semitransparent-color); 

// result: 
background-color: linear-gradient(to right, #a438ab, rgba(164, 56, 171, 0.5));

Büyüleyici prens:

Sadece internet gezgini 4 baytlık altıgen renge ARGB biçiminde izin verir, burada A Alfa kanalıdır. Degrade filtrelerde kullanılabilir, örneğin:

filter  : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";

Burada dir olabilir: 1 (yatay) veya 0 (dikey) Ve renk dizeleri onaltılık renkler (# FFAAD3) veya argb altıgen renkler (# 88FFAAD3) olabilir.

Sass'ta şunları yazabiliriz:

background-color: rgba(#ff0000, 0.5);

alfa kanalı ile bir rengin Hex gösteriminde önerildiği gibi ?

Farklı renk notasyonları öğrenmek zorunda kalacaksınız.
Kuler size renk bulma ve birden fazla gösterimde daha iyi bir şans verir.
Hex, RGB, FF = 255 ve 00 = 0'dan farklı değildir, ancak bildiğiniz budur. Yani bir bakıma, onu görselleştirmelisiniz.
Hex, RGBA ve RGB kullanıyorum. Kitle dönüşümü gerekmedikçe, bunu manuel olarak yapmak, bazı garip 100 renkleri ve kodlarını hatırlamanıza yardımcı olacaktır.
Toplu dönüştürme için Alarie tarafından verilen gibi bir komut dosyası yazın. Renkler ile bir patlama var.

neden kullanmıyorsun background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */

bir metin veya muhtemelen bir öğe için bir renk hedefliyorsanız, bunu yapmak çok daha kolay olmalıdır.