CSS ความทึบ

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

นั่นคือที่มาของคุณสมบัติความทึบ CSS คุณสมบัติความทึบ CSS ใช้เพื่อระบุความโปร่งใสขององค์ประกอบเว็บ

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

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

คุณสมบัติความทึบของ CSS ทำให้องค์ประกอบมองเห็นได้หรือโปร่งใส

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

นี่คือไวยากรณ์สำหรับคุณสมบัติความทึบ CSS:

img { opacity: 0.5; }

ตัวอย่างข้างต้นจะตั้งค่าความทึบของ img . ใดๆ องค์ประกอบบนหน้าเว็บให้เท่ากับ 0.5 ซึ่งหมายความว่ารูปภาพทั้งหมดจะมีความโปร่งใสมากกว่าที่เป็นค่าเริ่มต้น 50%

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

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

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

การสร้างภาพที่โปร่งใส

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

ต่อไปนี้คือตัวอย่างความทึบที่ใช้ในการตั้งค่ารูปภาพให้มีความทึบ 0.7 (ซึ่งทำให้รูปภาพมีความทึบ 70%):

img {
	opacity: 0.7;
}

รหัสของเราส่งคืน:

ทางด้านซ้าย เราได้สร้างภาพที่ไม่มีการตั้งค่าความทึบ ซึ่งหมายความว่าภาพไม่โปร่งใส ทางด้านขวา เราได้สร้างภาพและตั้งค่าความทึบเป็น 0.7 ส่งผลให้ภาพทางด้านขวามีความโปร่งใสมากกว่าภาพทางซ้าย

ทริกเกอร์ความทึบเมื่อวางเมาส์ไว้

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

สามารถใช้ตัวเลือก :hover CSS ร่วมกับแอตทริบิวต์ระดับความทึบเพื่อเปลี่ยนระดับความโปร่งใสของรูปภาพเมื่อผู้ใช้วางเมาส์เหนือรูปภาพ

สมมติว่าเราต้องการให้รูปภาพของเรามีความโปร่งใส 50% (หรือกล่าวคือ มีค่าความทึบ 0.5) โดยค่าเริ่มต้น เราต้องการตั้งค่าความทึบเป็น 1 เมื่อผู้ใช้วางเมาส์เหนือรูปภาพของเรา เราสามารถทำงานนี้ให้สำเร็จโดยใช้รหัสต่อไปนี้:

.img {
  opacity: 0.5;
}

.img:hover {
  opacity: 1;
}

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

ทางด้านซ้าย คุณสามารถดูตัวอย่างรูปภาพของเราเมื่อผู้ใช้วางเคอร์เซอร์เหนือองค์ประกอบนั้นด้วยเคอร์เซอร์ ทางด้านขวา คุณสามารถดูว่ารูปภาพของเราปรากฏอย่างไรเมื่อผู้ใช้ไม่ได้วางเคอร์เซอร์ไว้เหนือองค์ประกอบนั้นด้วยเคอร์เซอร์

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

กล่องใส

นอกจากนี้ องค์ประกอบความทึบยังใช้เพื่อทำให้กล่องโปร่งใสใน CSS ได้อีกด้วย

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

สมมติว่าเรามี

องค์ประกอบซึ่งสร้างกล่องบนหน้าเว็บของเรา เราต้องการให้องค์ประกอบ

ตัวใดตัวหนึ่งปรากฏตามปกติ และองค์ประกอบอื่นโปร่งใส 50% เราสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:

.div1 {
background-color: #B5651D;
	opacity: 0.5;
 	text-align: center;
  	padding: 20px;
  	color: black;
}

รหัสของเราส่งคืน:

ในตัวอย่างนี้ เราได้สร้างสองกล่อง กล่องด้านบนมีลักษณะเหมือนกับกล่องด้านล่าง แต่ไม่มีการระบุค่าความทึบ กล่องด้านล่างมีค่าความทึบ 0.5 ชุด ซึ่งหมายความว่ากล่องจะโปร่งใส 50%

อย่างที่คุณเห็น ข้อความในกล่องด้านล่างของเรามีความทึบมากกว่าด้วย นี่เป็นเพราะองค์ประกอบทั้งหมดภายในกล่อง

สืบทอดค่าความโปร่งใสที่เราได้ระบุไว้

ความโปร่งใสของสี RGBA

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

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

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

มาดูตัวอย่างกล่องสีน้ำตาลของเรากันก่อนหน้านี้ หากเราต้องการทำให้กล่องของเราโปร่งใส 70% แต่ไม่ใช่ข้อความในกล่อง เราสามารถใช้รหัสต่อไปนี้:

.div1 {
 	text-align: center;
  	padding: 20px;
  	color: black;
	background: rgba(181, 101, 29, 0.3);
}

รหัสของเราส่งคืน:

ค่าความทึบที่เราระบุในโค้ดของเราคือ 0.3 เนื่องจากยิ่งความทึบต่ำเท่าใด องค์ประกอบก็จะยิ่งโปร่งใสมากขึ้น และความทึบ 0.3 หมายความว่าองค์ประกอบนั้นจะโปร่งใส 70% เราได้ตั้งค่าสีของข้อความให้เป็นสีดำในตัวอย่างนี้

กล่องด้านบนเป็นตัวอย่างของ

ที่ไม่มีความทึบ กล่องด้านล่างใช้ rgba() ค่าเพื่อตั้งค่าความทึบเป็น 0.3 อย่างที่คุณเห็น กล่องด้านล่างของเรามีความโปร่งใสมากกว่ากล่องด้านบนอย่างมาก

อย่างไรก็ตาม เนื้อหาในกล่องของเรา—ข้อความ This is a box .—ไม่โปร่งใสอีกต่อไป เนื่องจากเราตั้งค่าสีพื้นหลังของกล่องให้โปร่งใส

บทสรุป

คุณสมบัติความทึบ CSS ใช้เพื่อตั้งค่าความโปร่งใสขององค์ประกอบบนหน้าเว็บ

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