เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติทึบตั้งระดับความทึบสำหรับองค์ประกอบ
ระดับความทึบอธิบายถึงความโปร่งใสในระดับที่ 1 ไม่โปร่งใสที่ทุกคน 0.5 เป็น 50% ดูผ่านและ 0 มีความโปร่งใสอย่างสมบูรณ์
| ค่าเริ่มต้น: | 1 |
|---|---|
| รับการถ่ายทอด: | no |
| Animatable: | yes, see individual properties . Read about animatable Try it |
| เวอร์ชัน: | CSS3 |
| ไวยากรณ์ javascript: | object .style.opacity="0.5" Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| opacity | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
หมายเหตุ: IE8 และรุ่นก่อนหน้าสนับสนุนทางเลือกตัวกรองคุณสมบัติ ต้องการ: filter:Alpha(opacity=50)
CSS ไวยากรณ์
opacity:number|initial|inherit;ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ | เล่น |
|---|---|---|
| number | ระบุความทึบ จาก 0.0 (fully transparent) ถึง 1.0 (fully opaque) | เล่น " |
| initial | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น | เล่น " |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
วิธีการใช้งานจาวาสคริปต์ในการเปลี่ยนความทึบสำหรับองค์ประกอบ:
function myFunction(x) {
// Return the text of the selected option
var opacity = x.options[x.selectedIndex].text;
var el
= document.getElementById("p1");
if (el.style.opacity
!== undefined) {
el.style.opacity = opacity;
} else {
alert("Your browser doesn't support this example!");
}
} ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
CSS Tutorial: CSS ภาพทึบ / โปร่งใส
อ้างอิง HTML DOM: opacity property