Saya tahu Anda dapat menulis ...
background-color: #ff0000;
... jika Anda menginginkan sesuatu yang berwarna merah.
Dan Anda dapat menulis ...
background-color: rgba(255, 0, 0, 0.5);
... jika Anda menginginkan sesuatu yang merah dan transparan.
Apakah ada cara singkat untuk menulis warna transparan sebagian dalam heksadesimal? Saya menginginkan sesuatu seperti:
background-color: #ff000088; <--- the 88 is the alpha
... atau ...
background-color: #ff0000 50%;
Saya mendapatkan semua warna saya dalam heksadesimal, dan harus mengubah semuanya menjadi skala 0-255 desimal sangat mengganggu.
rgb(0xff,\x80,#44)
Representasi oktober yang mengejutkan tampaknya sedikitrgb(0100, 0200,0300)
#4080C0
background-color: opacify(#ff0000, 0.5);
ataubackground-color: transparentize(#ff0000, 0.5);
Anda dapat menyediakan variabel warna hex hex ke fungsi Sass tersebut juga.Jawaban:
Modul Warna CSS Level 4 mungkin akan mendukung notasi RGBA heksadesimal 4 dan 8 digit!
Tiga minggu yang lalu (18 Desember 2014) draft editor Modul Warna CSS Level 4 diserahkan ke Kelompok Kerja CSS W3C. Meskipun dalam keadaan yang sangat rentan terhadap perubahan, versi dokumen saat ini menyiratkan bahwa dalam agak dekat CSS masa depan akan mendukung kedua 4 dan 8-digit notasi heksadesimal RGBA.
Catatan: kutipan berikut memiliki potongan yang tidak relevan dan sumbernya mungkin telah banyak dimodifikasi pada saat Anda membaca ini (seperti yang disebutkan di atas, itu adalah rancangan editor dan bukan dokumen yang diselesaikan).
Jika banyak hal berubah, silakan tinggalkan komentar untuk memberi tahu saya agar saya dapat memperbarui jawaban ini!
Apa artinya ini untuk masa depan warna CSS?
Ini berarti bahwa dengan asumsi ini tidak sepenuhnya dihapus dari dokumen Level 4, kami akan segera dapat mendefinisikan warna RGBA kami (atau warna HSLA, jika Anda salah satu dari mereka ) dalam format heksadesimal di browser yang mendukung Warna Sintaks modul Level 4.
Contoh
Kapan saya bisa menggunakan ini dalam produk yang saya hadapi klien?
Semua lelucon samping: saat ini baru awal tahun 2015, jadi ini tidak akan didukung di browser apa pun untuk beberapa waktu - bahkan jika produk Anda hanya dirancang untuk bekerja pada browser yang paling mutakhir, Anda mungkin akan tidak melihat ini beraksi di browser produksi dalam waktu dekat.
Lihat dukungan browser saat ini untuk notasi warna #RRGGBBAA
Namun, yang mengatakan, cara kerja CSS berarti bahwa kita benar-benar dapat mulai menggunakannya hari ini! Jika Anda benar-benar ingin mulai menggunakannya sekarang, selama Anda menambahkan kembali, browser yang tidak mendukung akan mengabaikan properti baru sampai dianggap valid:
Selama Anda melihat jawaban ini di peramban yang mendukung
background
dancolor
properti dalam CSS,<figure>
elemen dalam hasil potongan di atas akan terlihat sangat mirip dengan ini:Menggunakan versi Chrome terbaru di Windows (v39.0.2171) untuk memeriksa
<figure>
elemen kami , kita akan melihat yang berikut:Nilai heksadesimal 6 digit mundur dengan ditimpa oleh
rgba()
nilai, dan nilai heksadesimal 8 digit kami diabaikan karena saat ini dianggap tidak valid oleh parser CSS Chrome. Segera setelah browser kami mendukung nilai 8-digit ini, ini akan menimpanyargba()
.UPDATE 2018-07-04: Firefox, Chrome dan Safari mendukung notasi ini sekarang, Edge masih hilang tetapi mungkin akan mengikuti ( https://caniuse.com/#feat=css-rrggbbaa ).
sumber
/* Fall... foward? */
»Saya sarankan lompat ke depan. Fallback and jumpforward: ^ pSaya menemukan jawabannya setelah memposting peningkatan ke pertanyaan. Maaf!
MS Excel membantu!
cukup tambahkan awalan Hex ke nilai warna hex untuk menambahkan alpha yang memiliki opacity setara dengan nilai%.
(dalam rbga persentase opacity dinyatakan sebagai desimal seperti yang disebutkan di atas)
sumber
#FF00000C
setara denganrgba(255,0,0,0.05)
?#000000
menjadi#7F000000
.sumber
var rgb = '#ffabcd'; var a = '0.5'; var matches = rgb.match(/#([\da-f]{2})([\da-f]{2})([\da-f]{2})/i); var rgba = 'rgba(' + matches.slice(1).map(function(m) { return parseInt(m, 16); }).concat(a) + ')';
<div style={ { backgroundColor: `rgba(${ parseInt(color.substring(1,3),16) }, ${ parseInt(color.substring(3,5),16) }, ${ parseInt(color.substring(5,7),16) }, 0.5)` } }></div>
Lihat di sini http://www.w3.org/TR/css3-color/#rgba-color
Itu tidak mungkin, kemungkinan besar karena 0xFFFFFFFF lebih besar dari nilai maksimum untuk bilangan bulat 32bit
sumber
#ffffff
(enam hex-digit) sebenarnya adalah nilai warna 24-bit ; 0xFFFFFFFF sebenarnya 2³² − 1, dan dapat direpresentasikan sebagai integer 32-bit yang tidak ditandatangani . Saya pikir alasan mengapa#ffffffff
(delapan hex-digit) tidak ditentukan adalah karena warna CSS di-root dalam ruang warna sRGB dan notasi delapan-hex-digit akan ambigu dengan perangkat tampilan yang mendukung kedalaman warna 32 bit. Ingat bahwa masih#fff
ada artinyargb(100%, 100%, 100%)
- putih - keduanya dengan kedalaman warna 8 bit (256 warna) dan 16 bit (65536 atau 64 ribu warna).Chrome 52+ mendukung alpha hex:
sumber
¯\_(ツ)_/¯
Gunakan
red
,green
,blue
untuk mengkonversi ke RGBA:sumber
Saya khawatir itu tidak mungkin. yang
rgba
format yang Anda tahu adalah satu-satunya.sumber
Jika Anda dapat menggunakan KURANG, ada fungsi fade.
sumber
rgba(base-color, 0.5)
Pangeran menawan:
Hanya internet explorer yang memungkinkan warna hex 4 byte dalam format ARGB, di mana A adalah saluran Alpha. Ini dapat digunakan dalam filter gradien misalnya:
Di mana dir dapat berupa: 1 (horizontal) atau 0 (vertikal) Dan string warna dapat berupa warna hex (# FFAAD3) atau warna hex argb (# 88FFAAD3).
sumber
Di Sass kita bisa menulis:
seperti yang disarankan dalam representasi Hex warna dengan saluran alpha?
sumber
Nah, notasi warna yang berbeda adalah apa yang harus Anda pelajari.
Kuler memberi Anda kesempatan lebih baik untuk menemukan warna dan dalam beberapa notasi.
Hex tidak berbeda dari RGB, FF = 255 dan 00 = 0, tetapi itulah yang Anda ketahui. Jadi, Anda harus memvisualisasikannya.
Saya menggunakan Hex, RGBA dan RGB. Kecuali konversi massal diperlukan, melakukan ini secara manual akan membantu Anda mengingat beberapa 100 warna aneh dan kode-kodenya.
Untuk konversi massal, tulis beberapa skrip seperti yang diberikan oleh Alarie. Selamat bersenang-senang dengan Warna.
sumber
mengapa tidak digunakan
background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */
jika Anda menargetkan warna untuk teks atau elemen, ini seharusnya lebih mudah dilakukan.
sumber
opacity
properti css.