css โปร่งใส ความโปร่งใสของพื้นหลัง CSS พื้นหลังหรือข้อความโปร่งใสโดยใช้ CSS การใช้ภาพ PNG

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

ตั้งค่าความโปร่งใสสำหรับพื้นหลัง CSS

ดังนั้นทั้งหมดนี้ทำได้ง่ายมากด้วยรูปแบบการบันทึกสีเช่น rgba หากคุณทำงานกับโปรแกรมแก้ไขกราฟิก คุณคงรู้ว่าโหมดสี RGB ย่อมาจาก: สัดส่วนของสีแดง (สีแดง) สัดส่วนของสีเขียว (สีเขียว) และสีน้ำเงิน (สีน้ำเงิน) ดังนั้น rgba จึงเหมือนกันจริง ๆ มีเพียงพารามิเตอร์เดียวเท่านั้นที่เพิ่มเข้ามา - ความโปร่งใส มันเขียนแบบนี้:

สีพื้นหลัง: rgba (173, 57, 22, 0.5)

ขั้นแรกเราระบุอย่างชัดเจนว่าเรากำลังตั้งค่าสีในโหมด rgba จากนั้นเราจะระบุค่าความอิ่มตัวของสีหลักสามสีตั้งแต่ 0 ถึง 255 โดยที่ 255 คือความอิ่มตัวสูงสุด พารามิเตอร์ที่สี่คือความโปร่งใสของเรา ค่าจาก 0 ถึงหนึ่งถูกเขียนไว้ที่นี่ 1 เป็นองค์ประกอบที่ทึบแสงโดยสมบูรณ์ และ 0 เป็นองค์ประกอบที่โปร่งใสโดยสมบูรณ์ ดังนั้นหากคุณตั้งค่าเป็น 0 สีพื้นหลังจะไม่ปรากฏให้เห็นเลย

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

ตัวอย่างพื้นหลังโปร่งใส

ข้อดีของพื้นหลังโปร่งแสงนั้นแสดงตัวอย่างได้ง่าย เช่น เรามีพื้นหลังหน้าทั่วไป นี่คือลักษณะของบล็อกหากได้รับสีดำทึบ:

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

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

วลาด เมอร์เซวิช

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

PNG เป็นพื้นหลัง

ใน โปรแกรมแก้ไขกราฟิกรูปแบบโปร่งแสงสีเดียวได้รับการจัดเตรียมไว้ล่วงหน้าและบันทึกในรูปแบบ PNG-24 (รูปที่ 1) คุณสมบัติพิเศษของรูปแบบนี้คือรองรับความโปร่งใสได้ 256 ระดับ หรือพูดง่ายๆ ก็คือสามารถแสดงภาพที่โปร่งแสงได้

ข้าว. 1. รูปภาพเพื่อสร้างพื้นหลัง

จากนั้นเราเพิ่มรูปภาพเป็นพื้นหลังผ่านคุณสมบัติพื้นหลัง ดังแสดงในตัวอย่างที่ 1

ตัวอย่างที่ 1: การใช้ลวดลายโปร่งแสง

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

ผลลัพธ์ ตัวอย่างนี้แสดงในรูปที่. 3.

ข้าว. 2. การใช้ภาพพื้นหลัง

เบราว์เซอร์ที่ล้าสมัย อินเทอร์เน็ตเอ็กซ์พลอเรอร์ 6 ใช้งานไม่ได้กับความโปร่งแสงใน PNG-24 หากคุณต้องการรองรับเบราว์เซอร์นี้ด้วยเหตุผลบางประการ คุณจะต้องใช้สคริปต์สำหรับมัน

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

ภาพตาหมากรุก

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

ข้าว. 3. ลายตาหมากรุกขยายใหญ่ขึ้น

นี่คือลักษณะที่ปรากฏในตอนท้าย (รูปที่ 4)

ข้าว. 4. จำลองความโปร่งแสง

ข้อเสียของวิธีนี้เทียบได้กับวิธีก่อนหน้า อาจปรากฏลวดลายมัวเร่และข้อความจะลดลง

คุณสมบัติความทึบ

คุณสมบัติความทึบของ CSS 3 ระบุค่าความโปร่งใสและมีค่าตั้งแต่ 0 ถึง 1 โดยที่ 0 คือความโปร่งใสโดยสมบูรณ์ขององค์ประกอบ และค่าหนึ่งตรงกันข้ามคือทึบแสง คุณสมบัติความทึบมีคุณสมบัติพิเศษ - ความโปร่งใสใช้กับองค์ประกอบย่อยทั้งหมด และต้องไม่เกินค่าความทึบขององค์ประกอบหลัก ปรากฎว่าไม่สามารถมีข้อความทึบบนพื้นหลังโปร่งแสงได้ (ตัวอย่างที่ 2)

ตัวอย่างที่ 2: การใช้ความทึบ

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

ผลลัพธ์ของตัวอย่างจะแสดงในรูป 5.

ข้าว. 5. ความโปร่งแสงของข้อความและพื้นหลัง

ใน Internet Explorer เวอร์ชันสูงสุดและรวมถึง 8.0 ความทึบจะไม่ทำงาน ดังนั้นจึงใช้คุณสมบัติตัวกรองเฉพาะเบราว์เซอร์ โดยปกติแล้วจะส่งผลให้โค้ด CSS ไม่ถูกต้อง

RGBA

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

สีพื้นหลัง: rgba (r, g, b, a);

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

ไม่ใช่ทุกเบราว์เซอร์ที่รองรับรูปแบบนี้: Internet Explorer ตั้งแต่เวอร์ชัน 9, Opera ตั้งแต่เวอร์ชัน 10, Firefox ตั้งแต่ 3, Safari ตั้งแต่ 3.2 แต่โดยรวมแล้ว เบราว์เซอร์ที่ทันสมัยแสดงความโปร่งใสได้อย่างถูกต้อง สำหรับ IE เวอร์ชันเก่า คุณสามารถระบุสีในรูปแบบปกติแยกต่างหากได้ และแน่นอนว่าจะไม่มีความโปร่งใส หรือใช้คุณสมบัติตัวกรองอีกครั้ง แต่คุณจะต้องทนกับความจริงที่ว่าความโปร่งใสจะส่งผลต่อข้อความด้วย (ตัวอย่างที่ 3) เพื่อรักษาโค้ด CSS ที่ถูกต้อง ฉันใช้ความคิดเห็นแบบมีเงื่อนไข

ตัวอย่างที่ 3: การใช้ RGBA

HTML5 CSS3 IE Cr Op Sa Fx

ผลลัพธ์ของตัวอย่างสามารถดูได้ในรูป 6.

ข้าว. 6. พื้นหลังโปร่งแสงพร้อมข้อความทึบแสง

เปรียบเทียบภาพกับภาพก่อนหน้า ตัวอักษรสว่างขึ้นและชัดเจนขึ้น

ใน อินเทอร์เน็ตเบราว์เซอร์ Explorer 7 ค้นพบข้อผิดพลาดเมื่อรวมสีพื้นหลังเข้ากับค่าที่ต่างกัน ตัวอย่างเช่น หากคุณตั้งค่าสีพื้นหลังเป็นสีแดง ดังที่แสดงด้านล่าง พื้นหลังจะไม่ปรากฏเลยใน IE7

div ( สีพื้นหลัง: สีแดง; /* ใช้ไม่ได้ใน IE7 */ สีพื้นหลัง: rgba(255, 0, 0, 0.5); )

ซึ่งแก้ไขได้โดยการแทนที่คุณสมบัติสีพื้นหลังด้วยพื้นหลัง

div ( พื้นหลัง: สีแดง; /* และใช้งานได้ */ พื้นหลัง: rgba(255, 0, 0, 0.5); ) อย่างไรก็ตาม มีข้อแม้อยู่ประการหนึ่ง เครื่องมือตรวจสอบ CSS จะบ่นเกี่ยวกับพื้นหลังเมื่อกำหนดค่าในรูปแบบ RGBA แต่ในขณะเดียวกันก็หมายถึงพื้นหลังสีอย่างถูกต้อง โดยทั่วไป คุณจะต้องเลือกระหว่างเบราว์เซอร์และความถูกต้องเช่นเคย

ด้วยการถือกำเนิดของ CSS3 งานของนักออกแบบเลย์เอาต์จึงกลายเป็นเรื่องง่ายและมีเหตุผลมากขึ้นในหลาย ๆ ด้าน ท้ายที่สุด ตอนนี้คุณสามารถกำหนดค่าออบเจ็กต์ใด ๆ ได้อย่างยืดหยุ่นอย่างแท้จริง โดยหันมาใช้ JavaScript น้อยลง สมมติว่าคุณต้องปรับความโปร่งใสของพื้นหลัง - CSS มีหลายตัวเลือกทันที

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

แอตทริบิวต์สีพื้นหลัง

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

คุณลักษณะตำแหน่งพื้นหลัง

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

body (ตำแหน่งพื้นหลัง: กึ่งกลางขวา;) - ในตัวอย่างนี้ พื้นหลังจะอยู่ทางด้านขวาของหน้า และระยะห่างจากด้านล่างและด้านบนถึงรูปภาพจะเท่ากัน

แอตทริบิวต์ขนาดพื้นหลัง

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

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

แอตทริบิวต์สิ่งที่แนบมากับพื้นหลัง

คุณลักษณะนี้ระบุลักษณะการทำงาน ภาพพื้นหลังเมื่อเลื่อน ดังนั้นจึงอาจมี 3 ค่า (ไม่คำนึงถึงการสืบทอดซึ่งเป็นเรื่องปกติสำหรับคุณลักษณะทั้งหมดที่นำเสนอในบทความนี้):

• ที่ตายตัว— ทำให้ภาพไม่เคลื่อนไหวกับพื้นหลัง
• เลื่อน— พื้นหลังจะเลื่อนไปพร้อมกับองค์ประกอบอื่นๆ
• ท้องถิ่น— ภาพพื้นหลังจะเลื่อนหากเนื้อหามีการเลื่อน พื้นหลังที่ขยายเกินเนื้อหาได้รับการแก้ไขแล้ว

ตัวอย่างการใช้งาน:

เนื้อความ (แก้ไขสิ่งที่แนบมากับพื้นหลังแล้ว)

ขณะนี้ Firefox ไม่รองรับคุณสมบัติสุดท้าย (ท้องถิ่น)

คุณลักษณะต้นกำเนิดพื้นหลัง

คุณลักษณะนี้มีหน้าที่รับผิดชอบในการวางตำแหน่งขององค์ประกอบ เบราว์เซอร์ยุคแรกต้องมีคำนำหน้า คุณสมบัตินั้นมีพารามิเตอร์สามตัว:

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

หากระบุหลายค่า เบราว์เซอร์อาจตอบสนองแตกต่างกัน: Firefox และ Opera ยอมรับเฉพาะตัวเลือกแรกเท่านั้น

แอตทริบิวต์การทำซ้ำพื้นหลัง

ตามกฎแล้ว หากรูปภาพกำหนดพื้นหลัง ก็ควรทำซ้ำในแนวนอนหรือแนวตั้ง นี่คือสิ่งที่แอตทริบิวต์การทำซ้ำพื้นหลังใช้สำหรับ ดังนั้น พื้นหลังของบล็อกที่ CSS มีคุณสมบัติดังกล่าวสามารถมีพารามิเตอร์ตัวใดตัวหนึ่งได้:

• ไม่ทำซ้ำ— รูปภาพปรากฏบนหน้าในเวอร์ชันเดียว
• ทำซ้ำ— พื้นหลังถูกทำซ้ำตามแกน x และ y
• ทำซ้ำ-x- แนวนอนเท่านั้น
• ทำซ้ำ-y- แนวตั้งเท่านั้น
• ช่องว่าง— พื้นหลังซ้ำกัน แต่ถ้าไม่สามารถเติมช่องว่างได้ ช่องว่างจะปรากฏขึ้นระหว่างรูปภาพ
• กลม— รูปภาพจะถูกปรับขนาดหากไม่สามารถเติมเต็มพื้นที่ทั้งหมดด้วยรูปภาพทั้งหมดได้

ตัวอย่างการใช้แอตทริบิวต์:

เนื้อความ (พื้นหลังซ้ำ: ไม่ทำซ้ำซ้ำ)- คล้ายกัน พื้นหลังซ้ำ: ซ้ำ-y

ใน CSS3 คุณสามารถตั้งค่าสำหรับรูปภาพหลายรูปได้หากคุณแสดงรายการพารามิเตอร์โดยคั่นด้วยเครื่องหมายจุลภาค

แอตทริบิวต์คลิปพื้นหลัง

คุณลักษณะนี้กำหนดลักษณะการทำงานของพื้นหลังใต้เส้นขอบ (เช่น ในกรณีของเส้นขอบประ):

• ช่องว่างภายใน— พื้นหลังจะแสดงภายในบล็อกอย่างเคร่งครัด
• เส้นขอบกล่อง- ภาพพอดีกับกรอบ;
• เนื้อหากล่อง— รูปภาพในพื้นหลังจะปรากฏเฉพาะภายในเนื้อหาเท่านั้น

ตัวอย่างการใช้งาน:

ร่างกาย (คลิปพื้นหลัง: เนื้อหากล่อง;)

Chrom และ Safari จำเป็นต้องมีคำนำหน้า -webkit-

ความทึบและแอตทริบิวต์ตัวกรอง

แอตทริบิวต์ความทึบช่วยให้คุณตั้งค่าความโปร่งใสของพื้นหลัง - คุณสมบัติ CSS จะทำงานได้ในทุกเบราว์เซอร์ สามารถตั้งค่าได้ตั้งแต่ 0.0 ถึง 1.0 รวม ด้วยวิธีนี้คุณสามารถตั้งค่าความโปร่งใสได้ พื้นหลังซีเอสเอสหากไม่มีค่าจำนวนเต็ม: แทนที่จะเป็น 0.3 ก็เพียงพอที่จะเขียน3:

.block (ภาพพื้นหลัง: url(img.png); ความทึบ: .3;)

หากต้องการตั้งค่าความโปร่งใสของพื้นหลัง CSS ซึ่งจะทำงานได้แม้กับ IE ที่ต่ำกว่าเวอร์ชัน 9 ให้ใช้แอตทริบิวต์ตัวกรอง:

.block (ภาพพื้นหลัง: url(img.png); ตัวกรอง: alpha(opacity=30);)

ในกรณีนี้ ค่าความทึบจะถูกตั้งค่าในช่วงตั้งแต่ 0 ถึง 100 โปรดทราบว่าแอตทริบิวต์ความทึบนั้นแตกต่างจากการตั้งค่าความโปร่งใสโดยใช้ RGBA ตามพันธุกรรม: เมื่อใช้ความทึบ ไม่เพียงแต่พื้นหลังจะโปร่งใสเท่านั้น แต่ยังรวมถึงองค์ประกอบทั้งหมดภายในบล็อกด้วย .

ตรวจสอบสถิติการใช้งานเบราว์เซอร์สำหรับ CIS และประเทศอื่นๆ ทั้งหมดอยู่เสมอ ปัญหาใหญ่ที่สุดสำหรับนักออกแบบเว็บไซต์ทุกคนคือ IE เวอร์ชันเก่า พวกเขาไม่อนุญาตให้ใช้ CSS3 อย่างเต็มรูปแบบ เมื่อเข้ารหัสอย่าลืมใช้ บริการพิเศษซึ่งตรวจสอบว่าเบราว์เซอร์ของคุณรองรับหรือไม่ คุณสมบัติซีเอสเอส- หากคุณไม่สามารถติดตั้งเบราว์เซอร์เวอร์ชันเก่าได้ ให้ค้นหาบริการที่จะตรวจสอบการทำงานของไซต์ เบราว์เซอร์ที่แตกต่างกันออนไลน์

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

1. คุณสมบัติความทึบของ CSS เพื่อความโปร่งใสของพื้นหลัง

CSS มีคุณสมบัติความทึบ ซึ่งสามารถใช้เพื่อตั้งค่าความโปร่งใสของรูปภาพ ข้อความ รวมถึงพื้นหลังได้

สามารถตั้งค่าความโปร่งใสได้ง่ายๆ โดยการระบุ จำนวนจริงจาก 0.0 ถึง 1.0 ยิ่งตัวเลขต่ำ วัตถุก็จะยิ่งสังเกตเห็นได้น้อยลง

ความทึบ: 0.5; - ความโปร่งแสงความทึบ: 0.2; - วัตถุนี้มองเห็นได้เพียง 20% เท่านั้นความทึบ: 0.8; - วัตถุนี้มองเห็นได้เพียง 80% เท่านั้น

ลองดูตัวอย่างที่มีคุณสมบัติความทึบ

Текст также прозрачный

Этот код преобразуется на странице в следующее:

Текст также прозрачный

2. Прозрачность через свойство CSS background:rgba()

Вторым вариантом задания прозрачности фона на сайте является свойство CSS background:rgba. Рассмотрим пример

Текст также прозрачный

Этот код преобразуется на странице в следующее.

Свойство CSS RGBa позволяет задать фоновый цвет с альфа-каналом (т.е. заливать блоки полупрозрачным цветом).

Разумеется, в CSS есть свойство opacity, однако основной его недостаток: все дочерние элементы внутри прозрачного блока будут также наследовать его прозрачность.

Чаще всего используют заливку фона элемента одно-пиксельным PNG24 и фиксят прозрачность в IE6, или ещё фон делают прозрачным через css opacity. Текст позиционируют отдельно уже в другом элементе, но это, на мой взгляд, не совсем удобно…

С помощью RGBa решение выглядит следующим образом:

1. Допустим, нам нужен синий фон с прозрачностью 50%.

А не поддерживать его будут IE6–8, Opera 9.x, Mozilla Firefox 2.x

2. Для IE можно постараться и сделать более изящно:

Примечание: Цвет в фильтре задается 8 числами. Первые 2 числа это степень прозрачности: FF - полностью непрозрачный, 00 - прозрачный. Следующие 6 чисел привычное обозначение HTML-цвета.

Использование RGBa не ограничивается только фоновым цветом у блоков…