filter: blur brightness contrast grayscale
ใช้เอฟเฟกต์ฟิลเตอร์แบบภาพถ่ายกับองค์ประกอบด้วยฟังก์ชันของคุณสมบัติ filter ใน CSS
filter: blur brightness contrast grayscale เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณสมบัติ filter ของ CSS
คุณสมบัติ filter ใช้เอฟเฟกต์กราฟิกกับองค์ประกอบ คล้ายกับเลเยอร์ปรับแต่งใน Photoshop โดยไม่ต้องแก้ไขรูปภาพจริง
filter: blur()
ใช้เบลอแบบเกาส์เซียน อาร์กิวเมนต์คือรัศมีการเบลอ
<div class="frosted"></div>
<div class="hero-bg"></div>
filter: brightness()
ปรับความสว่าง 1 = ค่าเดิม 0 = สีดำ 2 = สว่างเป็นสองเท่า
<div class="dimmed"></div>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="120" height="120" alt="sample" />
filter: contrast()
ปรับความเปรียบต่าง 1 = ค่าเดิม 0 = สีเทาแบบไร้ความเปรียบต่าง ค่าที่มากกว่า 1 จะเพิ่มความเปรียบต่าง
<div class="high-contrast"></div>
<div class="low-contrast"></div>
filter: grayscale()
แปลงเป็นระดับสีเทา 0 = สีเต็มรูปแบบ 1 (หรือ 100%) = สีเทาทั้งหมด
<div class="grayscale"></div>
<div class="portfolio-item"></div>
filter: saturate()
ปรับความอิ่มตัวของสี 0 = สีเทา 1 = ค่าเดิม ค่าที่มากกว่า 1 = สีสด
<div class="vivid"></div>
<div class="muted"></div>
filter: hue-rotate()
หมุนวงล้อเฉดสีตามมุมที่กำหนด ทำให้สีทั้งหมดเลื่อนไปรอบวงล้อสี
<div class="hue-shifted"></div>
<div class="rainbow-demo"></div>
filter: sepia()
ใช้โทนซีเปียอบอุ่นแบบวินเทจ 0 = ค่าเดิม 1 = ซีเปียเต็มรูปแบบ
<div class="vintage"></div>
filter: drop-shadow()
คล้ายกับ box-shadow แต่จะติดตามรูปร่างที่เรนเดอร์จริงขององค์ประกอบ รวมถึงพื้นที่โปร่งใส เหมาะอย่างยิ่งสำหรับรูปภาพ PNG ที่มีรูปร่างไม่เป็นปกติ
<div class="icon">★</div>
การรวม filter หลายรายการ
เชื่อมฟังก์ชัน filter หลายรายการโดยคั่นด้วยช่องว่าง ฟังก์ชันเหล่านี้จะถูกใช้ตามลำดับจากซ้ายไปขวา:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="150" height="100" alt="photo" />
<div class="dramatic"></div>
filter สร้างบริบทการซ้อน
การใช้ filter กับองค์ประกอบจะสร้างบริบทการซ้อนใหม่ ซึ่งอาจทำให้ position: fixed ขององค์ประกอบลูกทำงานเหมือน position: absolute ได้ นี่เป็นข้อผิดพลาดที่พบได้บ่อย
ตรวจสอบความเข้าใจ
ฟังก์ชัน filter ของ CSS ใดใช้เบลอแบบเกาส์เซียนกับองค์ประกอบ
สรุป
คุณสมบัติ filter ใช้การปรับแต่งภาพถ่าย ได้แก่ blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia() และ drop-shadow() เชื่อมฟังก์ชันหลายรายการด้วยช่องว่าง โปรดจำไว้ว่า filter จะสร้างบริบทการซ้อน ซึ่งอาจส่งผลต่อองค์ประกอบลูกที่กำหนดตำแหน่งแบบ fixed
คำถามที่พบบ่อย
บทเรียน “filter: blur brightness contrast grayscale” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “filter: blur brightness contrast grayscale” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “filter: blur brightness contrast grayscale”
ใช้เอฟเฟกต์ฟิลเตอร์แบบภาพถ่ายกับองค์ประกอบด้วยฟังก์ชันของคุณสมบัติ filter ใน CSS คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “filter: blur brightness contrast grayscale” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- filter: blur brightness contrast grayscale
- backdrop-filter สำหรับกระจกฝ้า
- mix-blend-mode สำหรับการผสมเลเยอร์
- คุณสมบัติ isolation