ทุกสิ่งที่คุณต้องการรู้เกี่ยวกับความทึบใน CSS

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

• ความทึบใน CSS
• ความทึบที่สืบทอดมาจากองค์ประกอบแบบเรียงซ้อน
• การตั้งค่า RGBA Attribute สำหรับองค์ประกอบแบบเรียงซ้อน
• ความทึบจะเปลี่ยนไปตามเอฟเฟกต์โฮเวอร์

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

สถานการณ์ที่พบบ่อยที่สุดที่ใช้คุณลักษณะนี้คือ:

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

คุณอาจต้องการอ่านเกี่ยวกับไฟล์ ก่อนที่จะเรียนรู้เกี่ยวกับความทึบของ CSS

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

วิธีสร้าง jframe ใน java

ไปต่อกับบทความนี้เรื่อง Opacity ใน CSS

ความทึบใน CSS

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

ตัวอย่างที่ 1: ภาพพื้นหลังตั้งค่าเป็นกึ่ง ความโปร่งใส

img {opacity: 0.5 filter: alpha (opacity = 50) / * สำหรับ IE8 และรุ่นก่อนหน้า * /}  

ตัวอย่างที่ 1: เอาต์พุต

ภาพต้นฉบับ (ความทึบ 100%)

ภาพที่มีการตั้งค่าความทึบ 50%

ในตัวอย่างข้างต้นมีเพียงองค์ประกอบเดียวคือรูปภาพ องค์ประกอบอื่น ๆ สามารถตั้งค่าด้วยพารามิเตอร์ opacity เช่นข้อความองค์ประกอบ div และอื่น ๆ

ไปต่อกับบทความนี้เรื่อง Opacity ใน CSS

ความทึบที่สืบทอดมาจากองค์ประกอบแบบเรียงซ้อน

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

ให้เรานำตัวอย่างขององค์ประกอบข้อความลูกที่วางไว้เหนือภาพ TOM & JERRY ในตัวอย่างถัดไปของเรา เราสามารถดูเอฟเฟกต์ความทึบเริ่มต้นได้ในตัวอย่างที่ 2

.container {position: relative text-align: center opacity: 0.5} .centered {position: absolute top: 50% left: 50% transform: translate (-50%, -50%) color: blue font-size: 40px} } ทอมแอนด์เจอร์รี่

ตัวอย่างที่ 2: ข้อความสืบทอดความทึบจากอิมเมจหลัก

ไปต่อกับบทความนี้เรื่อง Opacity ใน CSS

การตั้งค่า RGBA Attribute สำหรับองค์ประกอบแบบเรียงซ้อน

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

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

พื้นหลัง: rgba (76, 175, 80, 1.0) / * ภาพไม่มีการตั้งค่าความทึบ * / / * พื้นหลังสีเขียวสำหรับข้อความที่มีความทึบ 100% * / / * ข้อความสีฟ้ามีความทึบ 100% * /

พื้นหลัง: rgba (76, 175, 80, 0.4) / * ภาพไม่มีการตั้งค่าความทึบ * / / * พื้นหลังสีเขียวสำหรับข้อความที่มีความทึบ 40% * / / * ข้อความสีน้ำเงินยังคงเห็นด้วยความทึบ 100% * /

หลังจากรหัสสี RGB แอตทริบิวต์ 'a' หมายถึง อัลฟ่า . อัลฟ่า พารามิเตอร์คือตัวเลขระหว่าง 0.0 (โปร่งใสเต็มที่) ถึง 1.0 (ทึบแสงเต็มที่)

ไปต่อกับบทความนี้เรื่อง Opacity ใน CSS

hashset ใน java คืออะไร

ความทึบจะเปลี่ยนไปตามเอฟเฟกต์โฮเวอร์

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

ตัวอย่างที่ 4 แสดงวิธีการดำเนินการนี้

จุดทั่วไปที่ควรทราบ:

• การตั้งค่าความทึบเป็นอีกทางเลือกหนึ่งนอกเหนือจากการใช้แอตทริบิวต์ 'visibility' ใน CSS อย่างไรก็ตามการใช้การตั้งค่าความทึบทำให้ง่ายต่อการตั้งค่าระดับความโปร่งใสที่แตกต่างกันตั้งแต่ศูนย์ถึงเต็ม
• ระดับความทึบจะถูกตั้งค่าหลังจากการทดสอบอย่างรอบคอบในเบราว์เซอร์ต่างๆ เมื่อตั้งค่าความทึบเป็นค่าต่ำบางครั้งข้อความหรือรูปภาพอาจมองไม่เห็นหรือไม่สามารถอ่านได้
• แนวคิดเบื้องหลังการใช้ความทึบคือการเน้นให้คมชัดในบางองค์ประกอบในขณะที่องค์ประกอบพื้นหลังอื่น ๆ จะไม่รบกวนความสนใจของผู้ใช้ ดังนั้นองค์ประกอบพื้นหลังดังกล่าวจึงถูกตั้งค่าให้มีความทึบต่ำลง
• ใน Internet Explorer สำหรับ IE8 และเวอร์ชันเก่าคุณสมบัติความทึบคือการตั้งค่า 'ตัวกรอง' ตั้งแต่ 1 ถึง 100 ในเบราว์เซอร์อื่น ๆ ทั้งหมดจะมีค่าตั้งแต่ 0 ถึง 1

เรามาถึงตอนท้ายของบทความเรื่อง Opacity In CSS

หากคุณสนใจเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาเว็บโปรดดูที่ โดย Edureka การฝึกอบรมการรับรองการพัฒนาเว็บจะช่วยให้คุณเรียนรู้วิธีสร้างเว็บไซต์ที่น่าประทับใจโดยใช้ HTML5, CSS3, Twitter Bootstrap 3, jQuery และ Google API และปรับใช้กับ Amazon Simple Storage Service (S3)

หากคุณยังคงสนใจหากคุณมีคำถามใด ๆ คุณสามารถโพสต์ไว้ในส่วนความคิดเห็นของบล็อก“ Opacity In CSS” นี้แล้วเราจะติดต่อกลับโดยเร็วที่สุด