ฟังก์ชัน CSS opacity()

หน้าก่อน CSS oklch() ฟังก์ชัน
หน้าต่อไป CSS perspective() ฟังก์ชัน
กลับไปยังชั้นบน คู่มืออ้างอิงฟังก์ชัน CSS

การระบุและการใช้งาน

CSS opacity() ฟังก์ชันฟิลเตอร์ใช้เพื่อปรับปรุงความโปร่งใสขององค์ประกอบ

100%（หรือ 1）จะไม่มีกรรมวัตร
50%（หรือ 0.5）ทำให้องค์ประกอบเป็น 50% โปร่งใส
0%（หรือ 0）ทำให้องค์ประกอบเป็นระดับความโปร่งใสสูงสุด

ตัวอย่าง

ตัวอย่าง 1

ตั้งค่าความโปร่งใสต่างกันสำหรับภาพ

#img1 {
  filter: opacity(80%);
}
#img2 {
  filter: opacity(50%);
}
#img3 {
  filter: opacity(0.2);
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2

จะ opacity() กับ backdrop-filter ใช้รวมกันของคุณสมบัติ:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: opacity(50%);
  backdrop-filter: opacity(50%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

ทดลองด้วยตัวเอง

CSS ภาษา

opacity(amount)

ค่า	คำอธิบาย
amount	เลือกตัวเลือก。กำหนดค่าเลขเชิงมิติหรือเปอร์เซ็นต์ของความโปร่งใส。0%（หรือ 0）ทำให้องค์ประกอบเป็นระดับความโปร่งใสสูงสุด。 100%（หรือ 1）แสดงภาพต้นฉบับ（ไม่มีกรรมวัตร）。ค่าเริ่มต้นคือ 1。

ค่า

คำอธิบาย

amount

เลือกตัวเลือก。กำหนดค่าเลขเชิงมิติหรือเปอร์เซ็นต์ของความโปร่งใส。0%（หรือ 0）ทำให้องค์ประกอบเป็นระดับความโปร่งใสสูงสุด。

100%（หรือ 1）แสดงภาพต้นฉบับ（ไม่มีกรรมวัตร）。ค่าเริ่มต้นคือ 1。