การสะท้อนภาพ CSS

สารบัญ

ในบทนี้คุณจะได้เรียนรู้วิธีการสะท้อนภาพ

การสะท้อนรูปภาพ CSS

คุณสมบัติ box-reflect ใช้เพื่อสร้างภาพสะท้อน

ค่าของคุณสมบัติ box-reflect สามารถเป็น:

below
above
left
right

รองรับเบราว์เซอร์

ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับคุณสมบัตินี้โดยสมบูรณ์

ตัวเลขที่ตามด้วย -webkit- ระบุเวอร์ชันแรกที่ใช้งานได้กับ คำนำหน้า

Property
box-reflect	4.0 -webkit-	79.0 -webkit-	Not supported	4.0 -webkit-	15.0 -webkit-

ตัวอย่าง

ที่นี่เราต้องการเงาสะท้อนด้านล่างภาพ:

  img {
  -webkit-box-reflect: below;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: below;
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection below the image:</p>
<img src="img_tree.png">

</body>
</html>

ตัวอย่าง

ที่นี่เราต้องการให้เงาสะท้อนทางด้านขวาของภาพ:

  img {
  -webkit-box-reflect: right;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: right;
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection to the right of the image:</p>
<img src="img_tree.png">

</body>
</html>

CSS ชดเชยการสะท้อน

หากต้องการระบุช่องว่างระหว่างภาพและการสะท้อน ให้เพิ่มขนาดของ ช่องว่างกับคุณสมบัติ box-reflect

ตัวอย่าง

ที่นี่เราต้องการให้มีเงาสะท้อนใต้ภาพ โดยมีค่าออฟเซ็ต 20px:

  img {
  -webkit-box-reflect: below 20px;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: below 20px;
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection below the image, with a 20 pixels offset:</p>
<img src="img_tree.png">

</body>
</html>

การสะท้อน CSS พร้อมการไล่ระดับสี

เรายังสามารถสร้างเอฟเฟ็กต์การเฟดให้กับการสะท้อนได้อีกด้วย

ตัวอย่าง

สร้างเอฟเฟ็กต์แบบเฟดเอาท์ให้กับการสะท้อน:

  img {
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), 
   rgba(0,0,0,0.4));
}

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

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection with gradient (to make a fade-out effect):</p>
<img src="img_tree.png">

</body>
</html>