คำหลักสี CSS

สารบัญ

หน้านี้จะอธิบายคำหลัก:

transparent
currentcolor
inherit

คำสำคัญที่โปร่งใส

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

ตัวอย่าง

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

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("paper.gif");
}

div.ex1 { 
  background-color: lightgreen;
  border: 2px solid black;
  padding: 15px;
}

div.ex2 { 
  background-color: transparent;
  border: 2px solid black;
  padding: 15px;
} 
</style>
</head>
<body>

<h2>The transparent Keyword</h2>

<div class="ex1">This div has a light green background.</div>
<br>
<div class="ex2">This div has a transparent background.</div>

</body>
</html>

หมายเหตุ: โปร่งใส คำหลักเทียบเท่ากับ rgba(0,0,0,0) ค่าสี RGBA เป็นส่วนขยายของ ค่าสี RGB พร้อมช่องอัลฟา - ซึ่งระบุความทึบสำหรับ สี. อ่านเพิ่มเติมในบท CSS RGB ของเราและใน บท CSS สีของเรา

คำหลักสีปัจจุบัน

คำหลัก currentcolor เปรียบเสมือนตัวแปร ที่เก็บค่าปัจจุบันของคุณสมบัติสีขององค์ประกอบ

คำหลักนี้จะมีประโยชน์หากคุณต้องการให้สีใดสีหนึ่งสอดคล้องกันใน องค์ประกอบหรือหน้า

ตัวอย่าง

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

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  color: blue;
  border: 10px solid currentcolor;
  padding: 15px;  
}
</style>
</head>
<body>

<h2>The currentcolor Keyword</h2>

<p>The currentcolor keyword refers to the current value of the color property of an element.</p>

<div>
This div element has a blue text color and a blue border.
</div>

</body>
</html>

ตัวอย่าง

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

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: purple;
}

div {
  background-color: currentcolor;
  padding: 15px;
}

div p {
  color: white;
}
</style>
</head>
<body>

<h2>The currentcolor Keyword</h2>

<p>This is some text in the body part...</p>

<div>
<p>This div's background color is set to the current color value of the body element.</p>
</div>

</body>
</html>

ตัวอย่าง

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

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: green;
}

div { 
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
  padding: 15px;
}
</style>
</head>
<body>

<h2>The currentcolor Keyword</h2>

<p>This is some text in the body part...</p>

<div>
<p>This div's border color and shadow color is set to the current color value of the body element.</p>
</div>

</body>
</html>

สืบทอดคำสำคัญ

คำหลัก inherit ระบุว่า คุณสมบัติควรสืบทอดค่าจากองค์ประกอบหลัก

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

ตัวอย่าง

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

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 2px solid red;
}

span {
  border: inherit;
}
</style>
</head>
<body>

<h2>The inherit Keyword</h2>

<div>Here, the <span>span element's</span> border settings will be inherited from the parent element.</div>
<br>

<div style="border:2px dotted blue;">Here, the <span>span element's</span> border settings will also be inherited from the parent element.</div>

</body>
</html>