ความทึบของภาพ CSS/ความโปร่งใส

สารบัญ

    แสดงสารบัญ

ความทึบ คุณสมบัติระบุความทึบ/ความโปร่งใสขององค์ประกอบ

ภาพที่โปร่งใส

คุณสมบัติ ความทึบ สามารถรับค่าได้ตั้งแต่ 0.0 - 1.0 ยิ่งค่าต่ำ ความโปร่งใสก็จะยิ่งมากขึ้น:

Forest

opacity 0.2

Forest

opacity 0.5

Forest

opacity 1
(default)

ตัวอย่าง

img {
  opacity: 0.5;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>

<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">

</body>
</html>

เอฟเฟกต์โฮเวอร์แบบโปร่งใส

คุณสมบัติ opacity มักจะใช้ร่วมกับตัวเลือก :hover เพื่อเปลี่ยนความทึบเมื่อวางเมาส์เหนือ:

Northern Lights
Mountains
Italy

ตัวอย่าง

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

</body>
</html>

ตัวอย่างอธิบายแล้ว

บล็อก CSS แรกคล้ายกับโค้ดในตัวอย่างที่ 1 นอกจากนี้เรายังได้เพิ่มสิ่งที่จะเกิดขึ้นเมื่อผู้ใช้วางเมาส์เหนือรูปภาพใดรูปภาพหนึ่ง ในกรณีนี้ เราต้องการให้รูปภาพไม่โปร่งใสเมื่อผู้ใช้เลื่อนเมาส์ไปเหนือรูปภาพ CSS สำหรับสิ่งนี้คือ opacity:1;

เมื่อตัวชี้เมาส์เคลื่อนออกจากรูปภาพ รูปภาพจะมีความโปร่งใสอีกครั้ง

ตัวอย่างของเอฟเฟกต์โฮเวอร์แบบย้อนกลับ:

Northern Lights
Mountains
Italy

ตัวอย่าง

img:hover {
  opacity: 0.5;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
  opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

</body>
</html>

กล่องใส

เมื่อใช้คุณสมบัติ opacity เพื่อเพิ่มความโปร่งใสให้กับพื้นหลังขององค์ประกอบ องค์ประกอบลูกทั้งหมด สืบทอดความโปร่งใสเดียวกัน ซึ่งจะทำให้ข้อความภายในองค์ประกอบโปร่งใสทั้งหมดอ่านยาก:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

ตัวอย่าง

div {
  opacity: 0.3;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #04AA6D;
  padding: 10px;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>

<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>

</body>
</html>

ความโปร่งใสโดยใช้ RGBA

หากคุณไม่ต้องการใช้ความทึบกับองค์ประกอบย่อย ดังตัวอย่างข้างต้น ให้ใช้ค่าสี RGBA ตัวอย่างต่อไปนี้จะตั้งค่าความทึบของสีพื้นหลัง ไม่ใช่ข้อความ:

100% opacity

60% opacity

30% opacity

10% opacity

คุณได้เรียนรู้จากบทสี CSS ของเราว่าคุณสามารถใช้ RGB เป็นค่าสีได้ นอกจาก RGB แล้ว คุณสามารถใช้ค่าสี RGB กับช่องอัลฟา (RGBA) ซึ่งระบุความทึบของสี

ค่าสี RGBA ระบุด้วย: rgba(red, green, blue, alpha) ที่ พารามิเตอร์ alpha คือตัวเลขระหว่าง 0.0 (โปร่งใสเต็มที่) ถึง 1.0 (ทึบแสงเต็มที่)

เคล็ดลับ: คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับสี RGBA ในบทสี CSS ของเรา

ตัวอย่าง

div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% 
opacity */
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(4, 170, 109);
  padding: 10px;
}

div.first {
  background: rgba(4, 170, 109, 0.1);
}

div.second {
  background: rgba(4, 170, 109, 0.3);
}

div.third {
  background: rgba(4, 170, 109, 0.6);
}
</style>
</head>
<body>

<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>

<p>With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>

<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>

</body>
</html>

ข้อความในกล่องใส

This is some text that is placed in the transparent box.

ตัวอย่าง

<html>
<head>
<style>
div.background {
    background: url(klematis.jpg) repeat;
    border: 2px solid black;
}

div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
    color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

ตัวอย่างอธิบายแล้ว

ขั้นแรก เราสร้าง <div> องค์ประกอบ (class="พื้นหลัง") ด้วยภาพพื้นหลังและเส้นขอบ

จากนั้นเราสร้างอีก <div> (class="transbox") ภายใน <div> แรก

ที่ <div class="transbox"> มีสีพื้นหลังและเส้นขอบ - div มีความโปร่งใส

ข้างในโปร่งใส <div> เราเพิ่มข้อความบางส่วนภายในองค์ประกอบ <p>