การใช้แอตทริบิวต์ style การใช้คุณสมบัติพื้นหลัง และการกำหนดค่าให้กับ rgb(255, 0, 0) , rgb(0, 255, 0) และ rgb(0, 0, 255) นั่นคือเราสลับกันสร้างช่องสัญญาณหนึ่งให้อิ่มตัวมากที่สุดและช่องที่เหลือจะไม่ใช้สำหรับการสังเคราะห์เนื่องจากค่าของช่องนั้นเป็นศูนย์

ลองแก้ไขตัวอย่างนี้และระบุค่าของคุณเอง เช่น rgb(100, 100, 100)

การตั้งค่าสีโดยใช้ RGBA

CSS3 มีเครื่องมือใหม่สำหรับการทำงานกับสี - รูปแบบ RGBA เรียกได้ว่าเป็นวิวัฒนาการของโมเดล RGB แต่ด้วยการเพิ่มแชนเนลใหม่หนึ่งแชนเนล - A หรือ alpha channel ช่องนี้ตั้งค่าความโปร่งใสของสี ค่าของมันถูกตั้งค่าในช่วงตั้งแต่ 0 ถึง 1 ค่า 0 สอดคล้องกับความโปร่งใสแบบเต็ม 1 - ความทึบเต็ม (สีจะเหมือนกับที่ระบุไว้ในสามช่อง RGB แรก) และค่ากลาง ​เช่น 0.4 หรือ 0.6 - ความโปร่งแสงถึงองศาที่แตกต่างกัน

รหัสตัวอย่าง

ต่อไปนี้เป็นวิธีการทำงาน:

โค้ดนี้มีลักษณะคล้ายกับโค้ดต่อไปนี้ ซึ่งใช้โมเดล RGB เพื่อระบุค่าสี:

นี่คือผลลัพธ์ของเขา:

ค่าช่องอัลฟ่าเท่ากับศูนย์ทำให้สีใดๆ มองไม่เห็น - โปร่งใสอย่างแน่นอน ค่าเท่ากับ 1 แปลสีในโค้ด RGB โดยไม่มีการเปลี่ยนแปลง คุณสมบัติ rgba(255,0,0,1.0) แสดงสีแดง rgb(255, 0, 0)

ตามค่าเลขฐานสิบหก (รหัส HEX)

ในชีวิตประจำวันเราใช้ระบบการนับทศนิยม ต้นกำเนิดของมันง่ายมาก - เรามีสิบนิ้วอยู่ในมือและการนับนิ้วนั้นสะดวกในชีวิต หากระบบทศนิยมมีตัวเลขสิบหลัก: ตั้งแต่ 0 ถึง 9 และตัวเลข 10 เป็นตัวเลขถัดไป ระบบเลขฐานสิบหกจะมี 16 หลัก และตัวเลขถัดไปคือตัวเลข 16

ในการระบุรหัสสี จะใช้เลขทศนิยมธรรมดาตั้งแต่ 0 ถึง 9 เป็นเลขฐานสิบหก และใช้ตัวอักษรละตินจาก A ถึง F เพื่อระบุตัวเลขตั้งแต่ 10 ถึง 15 นั่นคือ (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, ก, บี, ซี, ดี, อี, เอฟ) เพื่อความชัดเจน เรามาใส่ไว้ในตารางกัน:

ในการเขียนเลขฐานสิบหกที่มากกว่า F (15 ในระบบทศนิยม) เช่นเดียวกับในระบบทศนิยมก็ใช้การรวมกันของตัวเลขสองหลัก แต่เป็นเลขฐานสิบหกอยู่แล้วซึ่งเห็นได้ชัด ดังนั้น ในการเขียนเลขฐานสิบ 255 ในรูปแบบเลขฐานสิบหก ให้ใช้รูปแบบ FF

ระบบเลขฐานสิบหกนั้นคอมพิวเตอร์สามารถเข้าใจได้มากขึ้นและจะประมวลผลค่าที่กำหนดโดยค่าเลขฐานสิบหกได้เร็วขึ้น

หากต้องการระบุสีเป็นเลขฐานสิบหก ให้ใส่เครื่องหมาย “#” นำหน้าค่าตัวเลข เช่น #FFC0CB ค่า #FFC0CB ประกอบด้วยเลขฐานสิบหกสามหลัก FF, C0 และ CB ความหมายของรายการนี้เหมือนกับการตั้งค่าสีในรูปแบบ RGB (rgb(r, g, b)) - เลขฐานสิบหกแต่ละหลักในรหัส HEX ระบุความอิ่มตัวของสีในช่องของโมเดล RGB

รหัสนี้จะแสดงองค์ประกอบต่อไปนี้:

และนี่คือรูปภาพจากส่วน "การตั้งค่าสีโดยใช้ RGB" ในหน้านี้ด้านบน

รูปที่ 1. สีใน RGB

เราจะเห็นว่าสีเหมือนกัน

อนุญาตให้ใช้สัญลักษณ์ย่อของรหัสสี HEX: ตัวเลข 6 หลักสามารถเขียนเป็นตัวเลข 3 หลักได้ สิ่งนี้ใช้ได้เฉพาะเมื่อมีการทำซ้ำตัวเลขสองหลักในค่าสีของหนึ่งช่อง

นั่นคือตัวย่อต่อไปนี้เป็นที่ยอมรับ:

ตัวอย่างเช่น สี #ff22aa สามารถเขียนเป็น #f2a หรือสี #44aa22 สามารถเขียนเป็น #4a2 ได้

การตั้งค่าสีโดยใช้ HSL

CSS3 มีรูปแบบใหม่สำหรับการระบุสี

รูปแบบ HSL เป็นตัวย่อของคำภาษาอังกฤษ: Hue (hue), Saturate (ความอิ่มตัว) และ Lightness (ความสว่าง)

เฉดสีใน HSL คือค่าของสีบนวงล้อสีพิเศษ (รูปที่ 2) และระบุเป็นองศา หากเราวาดการเปรียบเทียบกับโมเดล RGB แล้ว 0° จะตรงกับสีแดง 120° จะตรงกับสีเขียว และ 240° จะตรงกับสีน้ำเงิน

ค่าสีจะเปลี่ยนจาก 0 เป็น 359

รูปที่ 2 วงล้อสี HSL

ค่าที่สอง - ความอิ่มตัว (Saturate) ตั้งเป็นเปอร์เซ็นต์ เมื่อความอิ่มตัวของสี 100% สีจะ “ฉ่ำ” ที่สุดเท่าที่จะเป็นไปได้ เมื่อตัวบ่งชี้ความอิ่มตัวเคลื่อนไปทาง 0% สีจะมัวลงและกลายเป็นสีเทา

ค่าที่สาม Lightness ก็ถูกกำหนดเป็นเปอร์เซ็นต์เช่นกัน ยิ่งเปอร์เซ็นต์สูง สีก็จะยิ่งสว่างขึ้น ค่าสูงสุด 0% และ 100% จะระบุสีดำ (ไม่มีแสง) และสีขาว (สว่างเกินไป) ตามลำดับ และไม่สำคัญว่าสีใดจากวงล้อสีจะถูกเลือกในช่องแรก ค่าความสว่างสีที่เหมาะสมที่สุดคือ 50%

การตั้งค่าสีโดยใช้ HSLA

รูปแบบ HSLA เกี่ยวข้องกับ HSL เช่นเดียวกับ RGB ที่เกี่ยวข้องกับ RGBA ในรูปแบบ HSLA เช่นเดียวกับใน RGBA จะมีการเพิ่มช่องอัลฟ่าซึ่งมีหน้าที่รับผิดชอบในเรื่องความโปร่งใสของสี

สีที่ระบุในรูปแบบ HSL จะอ่านง่ายกว่า เราสามารถพูดได้ว่ามันเป็นสัญชาตญาณ ตัวอย่างเช่น รหัส hsl(120,60%,50%) สามารถใช้แทนสีสุดท้ายได้หากมีรูปภาพของวงล้อสี HSL ในหน่วยความจำ สิ่งเดียวกันนี้ไม่สามารถพูดได้เกี่ยวกับรูปแบบ RGB และ HEX รหัสสีที่ระบุในรูปแบบเหล่านี้จะชัดเจนหลังจากแสดงภาพบนจอภาพเท่านั้น

รูปแบบใหม่ใน CSS3 (HSL, HSLA และ RGBA) ใช้งานได้กับเบราว์เซอร์ที่เริ่มต้นจากเวอร์ชัน: IE 9.0, Opera 10.0 Firefox 3.0 ฉันจะทำให้สไตล์ทำงานบนเบราว์เซอร์รุ่นเก่าได้อย่างไร

Somebloсk ( สีพื้นหลัง: rgb(255,50,50); สีพื้นหลัง: rgba(255,50,50,0.85) )

เมื่อใช้โค้ดนี้ในเบราว์เซอร์รุ่นเก่า สีพื้นหลังของคลาส .somebloсk แม้ว่าจะไม่ใช้ช่องอัลฟ่า แต่จะแสดงในรูปแบบ RGB

ฐานสิบหก/HTML

สี HEX ไม่ใช่อะไรนอกจากการแสดง RGB ในรูปแบบเลขฐานสิบหก

สีต่างๆ จะแสดงเป็นเลขฐานสิบหกสามกลุ่ม โดยแต่ละกลุ่มจะรับผิดชอบสีของตัวเอง: #112233 โดยที่ 11 คือสีแดง 22 คือสีเขียว และ 33 คือสีน้ำเงิน ค่าทั้งหมดต้องอยู่ระหว่าง 00 ถึง FF

แอปพลิเคชันจำนวนมากอนุญาตให้ใช้รูปแบบสีเลขฐานสิบหกในรูปแบบที่สั้นลง หากแต่ละกลุ่มมีอักขระเหมือนกัน เช่น #112233 ก็สามารถเขียนเป็น #123 ได้

1. h1 ( สี: #ff0000; ) /* แดง */
2. h2 ( สี: #00ff00; ) /* สีเขียว */
3. h3 ( สี: #0000ff; ) /* สีน้ำเงิน */
4. h4 ( color: #00f; ) /* สีน้ำเงินเหมือนกัน, ชวเลข */

RGB

พื้นที่สี RGB (แดง เขียว น้ำเงิน) ประกอบด้วยสีที่เป็นไปได้ทั้งหมดที่สามารถสร้างได้โดยการผสมสีแดง เขียว และน้ำเงิน รุ่นนี้ได้รับความนิยมในด้านการถ่ายภาพ โทรทัศน์ และคอมพิวเตอร์กราฟิก

ค่า RGB ถูกระบุเป็นจำนวนเต็มตั้งแต่ 0 ถึง 255 ตัวอย่างเช่น rgb(0,0,255) จะแสดงเป็นสีน้ำเงินเนื่องจากพารามิเตอร์สีน้ำเงินถูกตั้งค่าเป็นค่าสูงสุด (255) และพารามิเตอร์อื่นๆ ถูกตั้งค่าเป็น 0

แอปพลิเคชั่นบางตัว (โดยเฉพาะเว็บเบราว์เซอร์) รองรับการบันทึกเปอร์เซ็นต์ของค่า RGB (ตั้งแต่ 0% ถึง 100%)

1. h1 ( สี: rgb(255, 0, 0); ) /* แดง */
2. h2 ( สี: rgb(0, 255, 0); ) /* สีเขียว */
3. h3 ( สี: rgb(0, 0, 255); ) /* สีน้ำเงิน */
4. h4 ( สี: rgb(0%, 0%, 100%); ) /* สีน้ำเงินเหมือนกัน รายการเปอร์เซ็นต์ */

รองรับค่าสี RGB ในเบราว์เซอร์หลักทั้งหมด

RGBA

เมื่อเร็ว ๆ นี้เบราว์เซอร์สมัยใหม่ได้เรียนรู้ที่จะทำงานกับโมเดลสี RGBA ซึ่งเป็นส่วนขยายของ RGB ที่รองรับช่องอัลฟ่าซึ่งกำหนดความทึบของวัตถุ

ค่าสี RGBA ระบุเป็น: rgba (แดง เขียว น้ำเงิน อัลฟา) พารามิเตอร์อัลฟ่าเป็นตัวเลขตั้งแต่ 0.0 (โปร่งใสเต็มที่) ถึง 1.0 (ทึบแสงเต็มที่)

1. h1 ( สี: rgb(0, 0, 255); ) /* สีน้ำเงินใน RGB ปกติ */
2. h2 ( color: rgba(0, 0, 255, 1); ) /* เป็นสีน้ำเงินเหมือนกันใน RGBA เนื่องจากความทึบ: 100% */
3. h3 ( สี: rgba(0, 0, 255, 0.5); ) /* ความทึบ: 50% */
4. h4 ( สี: rgba(0, 0, 255, .155); ) /* ความทึบ: 15.5% */
5. h5 ( สี: rgba(0, 0, 255, 0); ) /* โปร่งใสทั้งหมด */

RGBA รองรับ IE9+, Firefox 3+, Chrome, Safari และ Opera 10+

HSL

โมเดลสี HSL เป็นตัวแทนของโมเดล RGB ในระบบพิกัดทรงกระบอก HSL แสดงสีในลักษณะที่ใช้งานง่ายและมนุษย์อ่านได้ง่ายกว่า RGB ทั่วไป โมเดลนี้มักใช้ในแอปพลิเคชันกราฟิก จานสี และการวิเคราะห์รูปภาพ

HSL ย่อมาจาก Hue (สี/เฉดสี), Saturation (ความอิ่มตัว), Lightness/Luminance (ความสว่าง/ความสว่าง/ความสว่าง อย่าสับสนกับความสว่าง)

Hue ระบุตำแหน่งของสีบนวงล้อสี (ตั้งแต่ 0 ถึง 360) ความอิ่มตัวคือค่าเปอร์เซ็นต์ของความอิ่มตัว (ตั้งแต่ 0% ถึง 100%) ความสว่างคือเปอร์เซ็นต์ของความสว่าง (จาก 0% ถึง 100%)

1. h1 ( สี: hsl(120, 100%, 50%); ) /* เขียว */
2. h2 ( สี: hsl(120, 100%, 75%); ) /* เขียวอ่อน */
3. h3 ( สี: hsl(120, 100%, 25%); ) /* เขียวเข้ม */
4. h4 ( สี: hsl(120, 60%, 70%); ) /* เขียวพาสเทล */

HSL รองรับใน IE9+, Firefox, Chrome, Safari และ Opera 10+

HSLA

เช่นเดียวกับ RGB/RGBA HSL มีโหมด HSLA พร้อมการรองรับช่องอัลฟาเพื่อระบุความทึบของวัตถุ

ค่าสี HSLA ระบุเป็น: hsla(hue, saturation, lightness, alpha) พารามิเตอร์อัลฟ่าเป็นตัวเลขตั้งแต่ 0.0 (โปร่งใสเต็มที่) ถึง 1.0 (ทึบแสงเต็มที่)

1. h1 ( color: hsl(120, 100%, 50%); ) /* สีเขียวใน HSL ปกติ */
2. h2 ( color: hsla(120, 100%, 50%, 1); ) /* สีเขียวเดียวกันใน HSLA เนื่องจากความทึบ: 100% */
3. h3 ( สี: hsla(120, 100%, 50%, 0.5); ) /* ความทึบ: 50% */
4. h4 ( สี: hsla(120, 100%, 50%, .155); ) /* ความทึบ: 15.5% */
5. h5 ( สี: hsla(120, 100%, 50%, 0); ) /* โปร่งใสทั้งหมด */

สีซีเอ็มวายเค

โมเดลสี CMYK มักเกี่ยวข้องกับการพิมพ์และการพิมพ์สี CMYK (ไม่เหมือนกับ RGB) เป็นรูปแบบการลบล้าง ซึ่งหมายความว่าค่าที่สูงกว่าจะสัมพันธ์กับสีเข้มกว่า

สีถูกกำหนดโดยอัตราส่วนของสีฟ้า (ฟ้า) สีม่วงแดง (สีม่วงแดง) สีเหลือง (สีเหลือง) โดยเติมสีดำ (คีย์/สีดำ)

ตัวเลขแต่ละตัวที่กำหนดสีใน CMYK แสดงถึงเปอร์เซ็นต์ของหมึกของสีที่กำหนดซึ่งประกอบขึ้นเป็นการผสมสี หรือถ้าให้เจาะจงกว่านั้นคือขนาดของจุดบนหน้าจอที่ส่งออกบนเครื่องโฟโตไทป์เซ็ตบนฟิล์มที่มีสีที่กำหนด ( หรือบนแผ่นพิมพ์โดยตรง ในกรณีของ CTP)

ตัวอย่างเช่น หากต้องการได้สี PANTONE 7526 คุณจะต้องผสมสีฟ้า 9 ส่วน สีม่วงแดง 83 ส่วน สีเหลือง 100 ส่วน และสีดำ 46 ส่วน ซึ่งสามารถแสดงได้ดังนี้: (9,83,100,46) บางครั้งมีการใช้การกำหนดต่อไปนี้: C9M83Y100K46 หรือ (9%, 83%, 100%, 46%) หรือ (0.09/0.83/1.0/0.46)

HSB/HSV

HSB (หรือที่เรียกว่า HSV) คล้ายกับ HSL แต่เป็นรุ่นสีที่แตกต่างกันสองแบบ ทั้งสองแบบใช้รูปทรงทรงกระบอก แต่ HSB/HSV ใช้โมเดล "hexcone" ในขณะที่ HSL ใช้โมเดล "bi-hexcone" ศิลปินมักชอบใช้โมเดลนี้ เป็นที่ยอมรับกันโดยทั่วไปว่าอุปกรณ์ HSB/HSV นั้นใกล้เคียงกับการรับรู้สีตามธรรมชาติมากกว่า โดยเฉพาะโมเดลสี HSB ใช้ใน Adobe Photoshop

HSB/HSV ย่อมาจาก Hue (สี/hue), ความอิ่มตัว (ความอิ่มตัว), ความสว่าง/ค่า (ความสว่าง/ค่า)

Hue ระบุตำแหน่งของสีบนวงล้อสี (ตั้งแต่ 0 ถึง 360) ความอิ่มตัวคือค่าเปอร์เซ็นต์ของความอิ่มตัว (ตั้งแต่ 0% ถึง 100%) ความสว่างคือค่าเปอร์เซ็นต์ของความสว่าง (ตั้งแต่ 0% ถึง 100%)

เอ็กซ์วายซี

โมเดลสี XYZ (CIE 1931 XYZ) เป็นปริภูมิทางคณิตศาสตร์ล้วนๆ ต่างจาก RGB, CMYK และรุ่นอื่นๆ ใน XYZ ส่วนประกอบหลักนั้นเป็น “จินตนาการ” ซึ่งหมายความว่าคุณไม่สามารถเชื่อมโยง X, Y และ Z กับชุดสีใดๆ ที่จะผสมได้ XYZ เป็นโมเดลหลักสำหรับโมเดลสีอื่นๆ เกือบทั้งหมดที่ใช้ในด้านเทคนิค

แล็บ

โมเดลสี LAB (CIELAB, “CIE 1976 L*a*b*”) คำนวณจากปริภูมิ CIE XYZ เป้าหมายการออกแบบของ Lab คือการสร้างปริภูมิสีซึ่งการเปลี่ยนสีจะเป็นเส้นตรงมากขึ้นในแง่ของการรับรู้ของมนุษย์ (เทียบกับ XYZ) นั่นคือเพื่อให้การเปลี่ยนแปลงค่าพิกัดสีเดียวกันในภูมิภาคต่างๆ ของปริภูมิสีจะ ให้ความรู้สึกเหมือนเปลี่ยนสี

มีหลายวิธีในการแสดงสีในการออกแบบเว็บ

HEX เป็นระบบการแสดงสีเลขฐานสิบหกตามฐาน 16 สำหรับระบบนี้ จะใช้เลขทศนิยมอารบิกตั้งแต่ 0 ถึง 9 และตัวอักษรละตินจาก A ถึง F เพื่อเสริมตัวเลขดิจิทัลถึง 16 สำหรับการออกแบบเว็บไซต์ สีหลัก (คีย์) 16 สี ถูกนำมาใช้ ซึ่งเรียกว่ารหัสสีเลขฐานสิบหก #RRGGBB โดยแต่ละคู่มีหน้าที่รับผิดชอบในการแบ่งสี: RR – สีแดง, GG – สีเขียว และ BB – สีน้ำเงิน แต่ละเศษส่วนของสีมีตั้งแต่ 00 ถึง FF

การแสดงสีอีกสองแบบในการออกแบบเว็บ ได้แก่: ในรูปแบบของ RGB(*,*,*) โดยที่แต่ละส่วน “*” ของสีจะแสดงด้วยเลขทศนิยมตั้งแต่ 0 ถึง 255 และตามชื่อสีในภาษาอังกฤษ

เมื่อสร้างภาพสี ปัญหาหลักคือการสร้างสีที่ถูกต้องบนคอมพิวเตอร์ จอภาพ และเบราว์เซอร์ประเภทต่างๆ หากเบราว์เซอร์ไม่สามารถแสดงสีได้อย่างถูกต้อง เบราว์เซอร์จะเลือกสีที่คล้ายกันหรือผสมหลายสี และบางครั้งก็สามารถถูกแทนที่ด้วยสีที่แตกต่างไปจากเดิมอย่างสิ้นเชิง

โต๊ะ สีหลัก 16 สีซึ่งใช้ในเบราว์เซอร์ทั้งหมด

ชื่อ	สี	ฐานสิบหก	(อาร์จีบี)
อควา (คลื่นทะเล)		#00FFFF	(000,255,255)
สีดำ		#000000	(000,000,000)
สีฟ้า		#0000FF	(000,000,255)
บานเย็น (สีม่วงแดง)		#FF00FF	(255,000,255)
สีเทา		#808080	(128,128,128)
สีเขียว		#008000	(000,128,000)
มะนาว (สีเขียวสดใส)		#00FF00	(000,255,000)
สีน้ำตาลแดง (เบอร์กันดีเข้ม)		#800000	(128,000,000)
น้ำเงิน (น้ำเงินเข้ม)		#000080	(000,000,128)
มะกอก		#808000	(128,128,000)
สีม่วง		#800080	(128,000,128)
สีแดง		#FF0000	(255,000,000)
เงิน		#C0C0C0	(192,192,192)
ฟ้าอมเขียว (เทา-เขียว)		#008080	(000,128,128)
สีขาว		#FFFFFF	(255,255,255)
สีเหลือง		#FFFF00	(255,255,000)

โต๊ะ สีม่วงสีและเฉดสีของมัน

ชื่อ	สี	ฐานสิบหก	(อาร์จีบี)
สีม่วงแดง (สีม่วงแดง)		#FFCBDB	(255,203,219)
สีม่วงแดง (สีม่วงแดง)		#FF0099	(255,000,153)
สีม่วงแดง (สีม่วงแดง)		#F95A61	(249,090,097)
สีบานเย็น (บานเย็น)		#FF00FF	(255,000,255)
Mauvein (สีม่วงสวรรค์)		#EF0097	(239,000,151)
สีชมพูแซลมอน (สีชมพูส้ม)		#FF91A4	(255,145,164)
Cenise (เฉดสีม่วง)		#DE3163	(153,149,140)
มะเขือม่วง (มะเขือยาว)		#990066	(153,000,132)
Lavender Blush (ชมพู-ลาเวนเดอร์)		#FFF0F5	(255,240,245)
ไลแลค (ไลแลค)		#C8A2C8	(200,162,200)
สีม่วงแดง (สีม่วงแดง)		#FF008F	(255,000,143)
กล้วยไม้ (กล้วยไม้)		#DA70D6	(218,112,214)
แดงม่วง (ม่วงแดง)		#C71585	(199,021,133)
ร่าเริง (ร่าเริง)		#92000A	(146,000,010)
Thistle (สีม่วง)		#D8BFD8	(185,211,238)
มะเขือยาวสีม่วง (สีม่วง)		#991199	(153,017,153)
Rosa vivo (สีชมพูเข้ม)		#FF007F	(255,000,127)
ลาเวนเดอร์-โรส (สีม่วง)		#FBA0E3	(108,123,139)
เมาท์แบทเทน สีชมพู		#997ABD	(153,122,141)

โต๊ะ สีเทาสีและเฉดสีของมัน

ชื่อ	สี	ฐานสิบหก	(อาร์จีบี)
สีเทา		#808080	(128,128,128)
สีเทา		#เบเบ้	(190,190,190)
(สีเทา)		#858585	(133,133,133)
สีเทา33		#545454	(084,084,084)
(กระดานชนวนสีเทา)		#708090	(112,128,144)
(ควอตซ์)		#99958с	(153,149,140)
(สีเทาอ่อน)		#bbbbbb	(187,187,187)
(เงิน)		#c0c0c0	(192,192,192)
(เทา-ขาว)		#f0f0f0	(240,240,240)
(เคราของ Abdel-Kerim)		#e0e0e0	(224,224,224)
สีเทาอ่อน (สีเทาอ่อน)		#d3d3d3	(211,211,211)
แสงสถานะสีเทา()		#778899	(119,136,153)
StateGray-1 (สีฟ้าคอร์นฟลาวเวอร์สีซีด1)		#c6e2ff	(198,226,255)
StateGray-2 (สีฟ้าคอร์นฟลาวเวอร์สีซีด2)		#b9d3ee	(185,211,238)
สเตทเกรย์3()		#9fb6cd	(159,182,205)
รัฐGray4()		#6c7b8b	(108,123,139)

ดูภาพวาดอย่างระมัดระวัง พื้นหลังของหน้าต่างแบบเลื่อนลงถูกทำให้โปร่งแสง นี่เป็นเทคนิคการออกแบบที่ค่อนข้างธรรมดา ลองคิดดูว่าสิ่งนี้สามารถนำไปใช้ได้อย่างไร

งาน

ทำให้สีข้ามเบราว์เซอร์โปร่งแสง

สารละลาย

ความคิดแรกในสถานการณ์นี้คือการใช้รูปภาพ PNG24 ที่มีความโปร่งแสงที่กำหนดไว้ล่วงหน้าสำหรับพื้นหลัง แต่ภาพนี้ไม่จำเป็นเลย คุณสามารถทำได้ดีหากไม่มีมัน (และดังนั้นจึงไม่มีการร้องขอเพิ่มเติมไปยังเซิร์ฟเวอร์) เรายังคงพยายามค้นหาวิธีแก้ปัญหาที่ดีที่สุด

ความคิดที่สองคือการใช้. แต่ในกรณีนี้มันไม่สะดวกมาก ท้ายที่สุดแล้วไม่เพียงแต่พื้นหลังเท่านั้น แต่ยังมีจารึกที่โปร่งแสงอีกด้วย ใช่ จริงๆ แล้ว หน้าต่างทั้งหมดพร้อมกัน

แน่นอน คุณสามารถลองเพิ่มคอนเทนเนอร์เพิ่มเติมและใส่ความทึบกับคอนเทนเนอร์นั้นเท่านั้น แต่องค์ประกอบ HTML นี้มีไว้สำหรับการตกแต่งเท่านั้น และเห็นได้ชัดว่าจะซ้ำซ้อน เป็นไปได้ไหมถ้าไม่มีมัน?

แน่นอนคุณทำได้! หากคุณใช้ RGBA

รูปแบบคำอธิบายสี RGBA

CSS3 ช่วยให้คุณสามารถระบุสีโดยใช้ฟังก์ชัน RGB และ RGBA ในกรณีนี้ เราต้องระบุสัดส่วนของแต่ละองค์ประกอบสีที่มีการจัดสรรหนึ่งไบต์ (ตั้งแต่ 0 ถึง 255 เผื่อใครจะไม่ทราบ)

ไวยากรณ์สำหรับกรณีนี้ง่ายมาก:

พื้นหลัง: RGB (0, 255, 0); /* สีเขียวบริสุทธิ์ */

สำหรับ RGBA จะมีการเพิ่มพารามิเตอร์ที่สี่ - ความโปร่งใสของอัลฟา (ตั้งแต่ 0 ถึง 1)

พื้นหลัง: RGBA(255, 0, 0, 0.5); /* สีแดงบริสุทธิ์ที่มีความโปร่งใส 50% */

นี่สินะ วิธีแก้ปัญหาของเรา เพียงตั้งค่าสีพื้นหลังโดยใช้ rgba แล้วทุกอย่างก็จะเป็นไปตามที่เราต้องการ ไร้รูปภาพและองค์ประกอบที่ไม่จำเป็น!

ฉันจะหาตัวเลขเหล่านี้ได้ที่ไหน?

คุณสามารถดูส่วนประกอบของสีได้โดยใช้เครื่องมือหยดตาของ Photoshop

เกี่ยวกับความเข้ากันได้ข้ามเบราว์เซอร์

เนื่องจากฟังก์ชัน RGB นั้นเก่ากว่า RGBA มากและมีมาตั้งแต่สมัยของมาตรฐาน CSS2 เพื่อป้องกันเบราว์เซอร์รุ่นเก่าที่สุด คุณสามารถใช้โครงสร้างที่ซ้ำกันต่อไปนี้:

SomeBlock ( พื้นหลัง: rgb(255, 0, 0); พื้นหลัง: rgba(255, 0, 0, 0.5); )

ด้วยวิธีนี้บรรพบุรุษของเบราว์เซอร์สมัยใหม่จะไม่มีความโปร่งแสง แต่สีจะยังคงถูกต้อง

คุณจะต้องดูแล IE แยกกัน Donkeys ไม่เข้าใจ RGBA จนถึงเวอร์ชัน 8 รวมอยู่ด้วย

เช่นเคย: ที่ดินสำหรับชาวนา, โรงงานสำหรับคนงาน, และไม้ค้ำยันลา! ในรูปแบบของ.

แน่นอนว่าในสภาวะการต่อสู้ เราได้ใส่กฎนี้ไว้ใน CSS แยกต่างหากซึ่งเราเชื่อมต่อกัน

SomeBlock ( พื้นหลัง:โปร่งใส; ตัวกรอง:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); ซูม: 1; )

เคล็ดลับคือการระบุสีเริ่มต้นและสีสิ้นสุดให้เหมือนกัน (ff0000 - สีแดง) และใช้ประโยชน์จากข้อเท็จจริงที่ว่าคุณสามารถตั้งค่าช่องอัลฟาสำหรับการไล่ระดับสีในตัวกรองนี้ (ในตัวอย่าง ค่าคือ 80)

สำหรับการอ้างอิง: ตัวกรองใช้ระบบเลขฐานสิบหกและรหัสสำหรับสีทึบแสงคือ FF (ในฐานสิบคือ 255) ดังนั้น เลขฐานสิบหก 80 จึงเป็นทศนิยม 128 นั่นคือความโปร่งใส 50%

ทดสอบใน:

• อส. 6-9
• ไฟร์ฟอกซ์ 3+
• โอเปร่า 10+
• ซาฟารี 4
• โครเมียม