color keyword CSS

บทนี้จะอธิบาย transparent、currentcolor และ inherit คำที่ใช้งาน

คำที่ใช้งาน transparent

transparent คำที่ใช้งานนี้ใช้เพื่อทำสีโปร่งใส มักใช้เพื่อตั้งสีพื้นหลังโปร่งใสขององค์ประกอบ:

ตัวอย่าง

ในนี้ สีพื้นหลังขององค์ประกอบ <div> จะถูกตั้งเป็นสีที่โปร่งใสทั้งหมด และภาพพื้นหลังจะแสดงออกมา:

body {
  background-image: url("paper.gif");
}
div {
  background-color: transparent;
}

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

注意：transparent คำที่ใช้งานนี้เท่ากับ rgba(0,0,0,0)ค่าสี RGBA คือการขยายค่าสี RGB ด้วยช่อง alpha ซึ่งกำหนดความโปร่งใสของสี รายละเอียดเพิ่มเติม โปรดดูที่ CSS RGB บทและ สี CSS บท

คำที่ใช้งาน currentcolor

currentcolor คำที่ใช้งานนี้เหมือนตัวแปร ซึ่งเก็บค่าสีปัจจุบันของคุณที่ใช้ในองค์ประกอบ color:

ถ้าคุณต้องการให้สีเฉพาะใดๆ ใช้งานต่อเนื่องในองค์ประกอบหรือหน้าเว็บนี้ คำที่ใช้งานนี้จะมีประโยชน์มาก:

ตัวอย่าง

ในตัวอย่างนี้ สีของเส้นขอบขององค์ประกอบ <div> จะเป็นสีสky ตามเนื้อหาขององค์ประกอบ <div> ที่เป็นสีสky:

div {
  color: blue;
  border: 10px solid currentcolor;
}

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

ตัวอย่าง

ในตัวอย่างนี้ สีพื้นหลังของ <div> จะถูกตั้งเป็นค่าสีปัจจุบันขององค์ประกอบ body:

body {
  color: purple;
}
div {
  background-color: currentcolor;
}

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

ตัวอย่าง

ในตัวอย่างนี้ สีของเขตเส้นและสีเงาของ <div> จะตั้งค่าเป็นค่าสีปัจจุบันของตัวปลายทางแม่:

body {
 color: green;
}
div {
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
}

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

inherit คำเรียกใช้

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

inherit คำเรียกใช้สามารถใช้กับ CSS คุณสมบัติใดๆ และสามารถใช้กับ HTML องค์ประกอบใดๆ

ตัวอย่าง

ในตัวอย่างนี้ การตั้งค่าของเขตเส้นที่ <span> จะสืบทอดมาจากตัวปลายทางแม่:

div {
  border: 2px solid red;
}
span {
  border: inherit;
}

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