คำหลักสี CSS
หน้านี้จะอธิบายtransparent, currentcolor, และ
inheritคีย์เวิร์ด
คีย์เวิร์ดโปร่งใส
transparentคีย์เวิร์ดใช้เพื่อทำให้สีโปร่งใส มักใช้เพื่อสร้างสีพื้นหลังโปร่งใสสำหรับองค์ประกอบ
ตัวอย่าง
ที่นี่ สีพื้นหลังขององค์ประกอบ <div> จะโปร่งใสทั้งหมด และภาพพื้นหลังจะแสดงผ่าน:
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}
หมายเหตุ:คำtransparent
หลักเทียบเท่ากับ rgba(0,0,0,0) ค่าสี RGBA เป็นส่วนขยายของค่าสี RGB ที่มีช่องอัลฟา - ซึ่งระบุความทึบของสี อ่านเพิ่มเติมใน บท CSS RGBของเรา และในบทCSS Colors ของเรา
คีย์เวิร์ดสีปัจจุบัน
คีย์เวิร์ดเป็นเหมือน ตัวแปรcurrentcolorที่เก็บค่าปัจจุบันของคุณสมบัติสีขององค์ประกอบ
คำหลักนี้จะมีประโยชน์หากคุณต้องการให้สีเฉพาะมีความสอดคล้องกันในองค์ประกอบหรือหน้า
ตัวอย่าง
ในตัวอย่างนี้ สีเส้นขอบขององค์ประกอบ <div> จะเป็นสีน้ำเงิน เนื่องจากสีข้อความขององค์ประกอบ <div> เป็นสีน้ำเงิน:
div {
color: blue;
border: 10px solid currentcolor;
}
ตัวอย่าง
ในตัวอย่างนี้ สีพื้นหลังของ <div> ถูกกำหนดเป็นค่าสีปัจจุบันขององค์ประกอบเนื้อหา:
body {
color: purple;
}
div {
background-color:
currentcolor;
}
ตัวอย่าง
ในตัวอย่างนี้ สีเส้นขอบและสีเงาของ <div> ถูกกำหนดเป็นค่าสีปัจจุบันขององค์ประกอบเนื้อหา:
body {
color: green;
}
div {
box-shadow: 0px 0px
15px currentcolor;
border: 5px solid currentcolor;
}
คำสำคัญที่สืบทอด
คีย์เวิร์ดระบุว่า คุณสมบัติinheritควรสืบทอดค่าจากองค์ประกอบหลัก
คำinheritหลักสามารถใช้สำหรับคุณสมบัติ CSS และองค์ประกอบ HTML ใดก็ได้
ตัวอย่าง
ในตัวอย่างนี้ การตั้งค่าเส้นขอบของ <span> จะสืบทอดมาจากองค์ประกอบหลัก:
div {
border: 2px solid red;
}
span {
border:
inherit;
}