คุณสมบัติ background-clip
คุณสมบัติ background-clip ใช้กำหนดพื้นที่ที่พื้นหลัง (สีหรือภาพ) จะถูกวาด แสดงผล จะครอบคลุมถึงขอบเขตไหน
ค่าที่ใช้ได้
| ค่า | คำอธิบาย |
|---|---|
border-box | วาดพื้นหลังจนถึงขอบด้านนอก (ค่าเริ่มต้น) |
padding-box | วาดพื้นหลังจนถึงขอบ padding (ไม่รวม border) |
content-box | วาดพื้นหลังเฉพาะพื้นที่เนื้อหา (ไม่รวม padding และ border) |
text | ตัดพื้นหลังให้เหลือเฉพาะรูปร่างตัวอักษร (ต้องใช้ร่วมกับ -webkit-background-clip: text และ color: transparent) |
ตัวอย่าง: ใช้ padding-box
<html>
<head>
<style>
#demo {
border: 5px dashed red;
padding: 10px;
background: orange;
background-clip: padding-box;
}
</style>
</head>
<body>
<div id="demo">
<h1>www.tutorialspoint.com</h1>
<p>พื้นหลังสีส้มจะไม่ครอบคลุมขอบสีแดงแบบ dashed...</p>
</div>
</body>
</html>ตัวอย่าง: ตัดพื้นหลังตามตัวอักษร (Text Clipping)
.text-clip {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 3rem;
font-weight: bold;
}เทคนิคนี้นิยมใช้สร้างข้อความที่มีพื้นหลังเป็น gradient หรือภาพ
