ความโปร่งแสง/ความโปร่งแสง CSS
opacity ตัวแปลงกำหนดความโปร่งแสง/ความโปร่งแสงขององค์ประกอบ
รูปภาพโปร่งแสง
opacity ค่าของตัวแปลงคือ 0.0-1.0 ค่าที่ต่ำกว่า ความโปร่งแสงสูงขึ้น
opacity 0.2
opacity 0.5
opacity 1
ตัวอย่าง
img {
opacity: 0.5;
}
ประสิทธิภาพเห็นชนะโปร่งแสง
opacity ตัวแปลงทั่วไปจะใช้ :hover ใช้ตัวเลือกเดียวกัน ซึ่งสามารถเปลี่ยนความโปร่งแสงเมื่อเห็นชนะได้
ตัวอย่าง
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
การอธิบายตัวอย่าง
CSS บล็อคแรกคล้ายตัวอย่างในตัวอย่าง 1 นี้ นอกจากนี้ เรายังเพิ่มประสิทธิภาพเมื่อผู้ใช้เห็นชนะหนึ่งในรูปภาพ ในกรณีนี้ เมื่อผู้ใช้เห็นชนะรูปภาพ เราต้องการให้รูปภาพไม่มีความโปร่งแสง นี่เป็น CSS ตอนนี้ opacity:1;.
เมื่อเครื่องมือคอมพิวเตอร์เลิกมุมมองที่ภาพ ภาพจะโปร่งใสอีกครั้ง
ตัวอย่างของประสิทธิผลตอบโต้รอบๆ
ตัวอย่าง
img:hover {
opacity: 0.5;
}
กล่องสีและโปร่งใส
ใช้ opacity เมื่อกำหนดค่า opacity สำหรับพื้นหลังองค์ประกอบ ทุกองค์ประกอบลูกของมันจะทรงค่าความโปร่งใสเดียวกัน ซึ่งอาจทำให้ข้อความที่อยู่ในองค์ประกอบที่โปร่งใสสุดที่สุดเป็นไปไม่ได้อ่าน
ตัวอย่าง
div {
opacity: 0.3;
}
ความโปร่งใสสี RGBA
ถ้าคุณไม่ต้องการใช้ความโปร่งใสสำหรับองค์ประกอบลูก อย่างเช่นตัวอย่างข้างต้น ใช้ค่าสี RGBA ด้านล่างนี้เพื่อกำหนดสีพื้นหลังขององค์ประกอบ ไม่ใช่ความโปร่งใสของข้อความ:
คุณได้เรียนรู้มากกว่าจาก CSS 颜色 คุณได้เรียนรู้มากกว่าเกี่ยวกับสี RGB ในบทนี้ นอกจาก RGB แล้ว ยังสามารถใช้สี RGB กับช่อง alpha (RGBA) - ช่องนี้กำหนดความโปร่งใสของสี
สี RGBA กำหนดเป็น：rgba(red, green, blue, alpha) alpha ตัวเลขประกอบระหว่าง 0.0 (โปร่งใสสุด) และ 1.0 (ไม่โปร่งใสอย่างเต็มที่)
คำแนะนำ:คุณจะพบใน CSS 颜色 คุณจะเรียนรู้มากกว่าเกี่ยวกับสี RGBA ในบทนี้
ตัวอย่าง
div {
background: rgba(76, 175, 80, 0.3) /* พื้นหลังสีเขียวที่มีความโปร่งใส 30% */
}
ข้อความในกล่องสีและโปร่งใส
นี่คือข้อความที่ตั้งอยู่ในกล่องสีและโปร่งใส
ตัวอย่าง
<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>นี่คือข้อความที่ตั้งอยู่ในกรอบที่โปร่ง</p>
</div>
</div>
</body>
</html>
การอธิบายตัวอย่าง
ในตอนแรก เราสร้างองค์ประกอบ <div> ที่มีภาพพื้นหลังและเขตตรง (class="background")
หลังจากนั้น เราสร้าง <div> อีกแบบหนึ่งภายใน <div> แรก (class="transbox")
<div class="transbox"> มีสีพื้นหลังและเขตตรง - div นี้เป็นโปร่ง
ใน <div> ที่โปร่ง พวกเราเพิ่มข้อความบางอย่างในองค์ประกอบ <p> ของเรา
