สร้างพื้นหลังโปร่งใสใน HTML และ CSS (เอฟเฟกต์ความทึบและ RGBA)

เอฟเฟกต์โปร่งแสงองค์ประกอบนี้มองเห็นได้ชัดเจนในภาพพื้นหลังและแพร่หลายในระบบปฏิบัติการต่างๆ เพราะมันดูมีสไตล์และสวยงาม สิ่งสำคัญคือต้องไม่มีรูปแบบเอกรงค์ใต้บล็อกโปร่งแสง แต่เป็นภาพในกรณีนี้ที่ความโปร่งใสจะสังเกตเห็นได้ชัดเจน

เอฟเฟกต์นี้ทำได้หลายวิธี รวมถึงเทคนิคที่ล้าสมัย เช่น การใช้ภาพ PNG เป็นพื้นหลัง การสร้างภาพตาหมากรุก และคุณสมบัติความทึบ แต่ทันทีที่จำเป็นต้องสร้างพื้นหลังโปร่งแสงในบล็อก วิธีการเหล่านี้ก็มีข้อเสียที่ไม่น่าพอใจ

พิจารณาความโปร่งแสงของข้อความและพื้นหลัง - วิธีใช้งานอย่างถูกต้องในการออกแบบเว็บไซต์:

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

HTML 5 CSS 3 IE 9

ในการออกแบบเว็บ ความโปร่งใสบางส่วนยังถูกนำไปใช้และบรรลุผลผ่านรูปแบบสี RGBA ซึ่งตั้งค่าไว้สำหรับพื้นหลังขององค์ประกอบเท่านั้น

โดยทั่วไป ในการออกแบบ เฉพาะพื้นหลังขององค์ประกอบเท่านั้นที่ควรโปร่งแสง และข้อความควรทึบแสงเพื่อรักษาความสามารถในการอ่าน คุณสมบัติความทึบไม่เหมาะสมที่นี่ เนื่องจากข้อความภายในองค์ประกอบจะมีความโปร่งใสบางส่วนเช่นกัน เป็นการดีที่สุดที่จะใช้รูปแบบ RGBA ซึ่งช่องอัลฟาเป็นส่วนหนึ่งหรือกล่าวอีกนัยหนึ่งคือค่าความโปร่งใส ค่านี้เขียนด้วย rgba จากนั้นค่าของส่วนประกอบสีแดง น้ำเงิน และเขียวจะแสดงในวงเล็บโดยคั่นด้วยเครื่องหมายจุลภาค สุดท้ายคือความโปร่งใส ซึ่งตั้งค่าจาก 0 ถึง 1 โดยที่ 0 คือความโปร่งใสทั้งหมด และ 1 เป็นสีทึบสำหรับไวยากรณ์ rgba

พื้นหลังโปร่งแสง HTML 5 CSS 3 IE 9

ตั้งค่าความทึบของพื้นหลังเป็น 90% - พื้นหลังกึ่งโปร่งแสงและข้อความทึบแสง

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

ค่าที่เป็นไปได้

ไวยากรณ์สำหรับคุณสมบัติความทึบใน css มีลักษณะดังนี้:

ตัวเลือก (ความทึบ: 1;) ตัวเลือก (ความทึบ: 0;) ตัวเลือก (ความทึบ: 0.4;)

อินพุตยอมรับค่าตัวเลขในช่วง 0 ถึง 1 พารามิเตอร์อาจเป็นเศษเสี้ยวของหนึ่งในขณะที่ใช้จุดเป็นตัวคั่นสำหรับส่วนจำนวนเต็มและเศษส่วนใน CSS

องค์ประกอบที่มีความโปร่งใสเป็นศูนย์จะมองไม่เห็น แต่ยังคงเข้ามาแทนที่บนหน้าและยังคงความสามารถในการโต้ตอบกับผู้ใช้

หากค่าคุณสมบัติแตกต่างจากศูนย์ ความโปร่งใสที่แท้จริงจะถูกคำนวณเป็นเปอร์เซ็นต์ของขีดจำกัดบน โดยปกติ ความทึบ: 1 กำหนดความทึบทั้งหมดขององค์ประกอบ

ความโปร่งใสของโหนดย่อย

อย่างไรก็ตาม หากองค์ประกอบมีพาเรนต์ที่มีความโปร่งใสแตกต่างจากหนึ่ง การคำนวณจะเปลี่ยนไป ทายาทไม่สามารถ "โปร่งใสน้อยกว่า" กว่าบรรพบุรุษของตนได้ ค่าความทึบของบล็อกหลักจะกลายเป็นขีดจำกัดบนของความทึบของเด็ก

ผู้ปกครอง (ความทึบ: 0.7;) ลูก (ความทึบ: 1;)

ในสถานการณ์นี้ อิลิเมนต์ลูกจะโปร่งใส 30% แม้ว่าจะตั้งค่าความทึบเป็นหนึ่ง

ตัวอย่างการใช้

ตัวอย่างที่ 1 ความโปร่งแสง จำเป็นต้องมองเห็นพื้นหลังหลักของบล็อกภายใต้องค์ประกอบเป้าหมาย

เป้าหมาย (พื้นหลัง: สีดำ ความทึบ: 0.5;)

ไม่เพียงแต่พื้นหลังของบล็อกเป้าหมายจะโปร่งแสงเท่านั้น แต่ยังรวมถึงข้อความด้วย

ตัวอย่างที่ 2 การควบคุมความโปร่งใสแบบไดนามิก ค่าของคุณสมบัติความทึบ CSS ของบล็อกเป้าหมายจะเปลี่ยนแปลงเมื่อคุณวางเมาส์เหนือบล็อกนั้น

เป้าหมาย (ความทึบ: 0.2;) .target: โฮเวอร์ (ความทึบ: 1;)

ความโปร่งใสแบบไดนามิก

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

ในการเข้าถึงความโปร่งใสจากสคริปต์ คุณต้องอ้างถึงอ็อบเจ็กต์ style ขององค์ประกอบเฉพาะ

// รับค่าความทึบปัจจุบัน var opacity = element.style.opacity; // ตั้งค่าใหม่ element.style.opacity = 0.4;

การลบบล็อกสามารถทำได้โดยใช้คุณสมบัติการเปลี่ยนแปลง CSS:

องค์ประกอบ (ความทึบ: 0.1; การเปลี่ยนแปลง: ความทึบ 1000ms;) องค์ประกอบ: โฮเวอร์ (ความทึบ: 0.8; การเปลี่ยนแปลง: ความทึบ 2000ms;)

ตอนนี้ โหนดองค์ประกอบจะเปลี่ยนความทึบจาก 10 เป็น 80% เมื่อวางเมาส์ไว้ภายในหนึ่งวินาที และเมื่อเคอร์เซอร์ออกไป มันจะจางหายไปเป็นค่าเดิมภายในสองวินาที

คุณสมบัติ CSS ความทึบ รวมกับกลไกการเปลี่ยนภาพ ช่วยให้คุณสร้างเอฟเฟกต์ที่สวยงามได้

ช่องอัลฟ่าแทนความทึบ

รายละเอียดปลีกย่อยหลักของกลไกความทึบใน CSS:

• เอฟเฟกต์ของมันไม่เพียงแต่ขยายไปยังพื้นหลังของบล็อกเท่านั้น แต่ยังรวมถึงเนื้อหาข้อความด้วย ซึ่งควรปล่อยให้ชัดเจน
• องค์ประกอบลูกต้องไม่โปร่งใสน้อยกว่าองค์ประกอบหลัก

หากเอฟเฟกต์เหล่านี้ทำให้ชีวิตยากสำหรับตัวออกแบบเลย์เอาต์ แทนที่จะเป็นความทึบ คุณควรใช้พื้นหลังโปร่งใสโดยระบุค่าในรูปแบบ RGBA หรือ HSLA

ความโปร่งใสใน CSS เป็นเทคนิคที่ค่อนข้างทันสมัยเมื่อเร็วๆ นี้ และทำให้เกิดปัญหาในการใช้งานข้ามเบราว์เซอร์ จนถึงขณะนี้ ยังไม่มีวิธีการใดวิธีหนึ่งในการปรับใช้ความโปร่งใสในเบราว์เซอร์ทั้งหมด อย่างไรก็ตาม ล่าสุด สถานการณ์ดีขึ้นอย่างเห็นได้ชัด

บทความนี้กล่าวถึงวิธีการที่มีอยู่โดยละเอียด และให้ตัวอย่างโค้ดและคำอธิบายที่จะช่วยให้คุณบรรลุผลลัพธ์เดียวกันในเบราว์เซอร์ทั้งหมดโดยใช้ความพยายามเพียงเล็กน้อย

อีกประเด็นที่น่ากล่าวถึงคือ แม้ว่าความโปร่งใสจะเกิดขึ้นมาหลายปีแล้ว แต่ก็ไม่เคยเป็นส่วนหนึ่งของมาตรฐาน CSS มาก่อน นี่เป็นคุณสมบัติที่ไม่ได้มาตรฐานและควรเป็นส่วนหนึ่งของข้อกำหนด CSS3

แนวทางเก่า

ใน Firefox และ Safari เวอร์ชันเก่า คุณต้องใช้คุณสมบัติดังนี้:

#myElement (-khtml-opacity: .5; -moz-opacity: 0.5;)

คุณสมบัติ -khtml-opacity ถูกใช้ในเบราว์เซอร์ webkit เวอร์ชันเก่า คุณสมบัตินี้เลิกใช้แล้วและไม่จำเป็นอีกต่อไป เว้นแต่คุณจะแน่ใจว่าการเข้าชมไซต์ของคุณส่วนใหญ่มาจากผู้เยี่ยมชมที่ใช้ Safari 1.x ซึ่งแน่นอนว่าไม่น่าเป็นไปได้

บรรทัดถัดไปใช้คุณสมบัติ -moz-opacity ที่ทำงานบนเครื่องมือ Mozilla เวอร์ชันแรกๆ Firefox ยุติการสนับสนุนในเวอร์ชัน 0.9

ความโปร่งใสของ CSS ใน Firefox, Safari, Chrome และ Opera

สำหรับเบราว์เซอร์สมัยใหม่ส่วนใหญ่ คุณสมบัติต่อไปนี้ก็เพียงพอแล้ว:

#myElement (ความทึบ: .7;)

ในตัวอย่างข้างต้น องค์ประกอบถูกตั้งค่าเป็นค่าทึบ 70% (ความทึบ 30%) นั่นคือถ้าเราตั้งค่าเป็นหนึ่ง องค์ประกอบนั้นจะทึบแสง ดังนั้นการตั้งค่านี้เป็นศูนย์จะทำให้มองไม่เห็น

คุณสมบัติความทึบรองรับทศนิยม 2 หลัก นั่นคือค่า ".01" จะแตกต่างจากค่า ".02" แม้ว่าจะไม่ค่อยสังเกตเห็นได้ชัดก็ตาม

ความโปร่งใสของ CSS สำหรับ Internet Explorer

ตามปกติแล้ว Internet Explorer จะไม่เป็นมิตรกับเบราว์เซอร์อื่น นอกจากนี้ ขณะนี้เรามีเบราว์เซอร์นี้สามเวอร์ชันซึ่งมีการใช้งานอย่างแพร่หลาย การตั้งค่าความโปร่งใสในแต่ละเวอร์ชันจะแตกต่างกัน และบางครั้งต้องใช้ความพยายามเพิ่มเติมเพื่อให้ได้ผลลัพธ์ที่ดี

#myElement (ตัวกรอง: อัลฟา (ความทึบ = 40);)

ตัวอย่างนี้ใช้คุณสมบัติตัวกรอง ซึ่งทำงานในเวอร์ชัน 6-8 แต่มีข้อ จำกัด ประการหนึ่งสำหรับเวอร์ชัน 6 และ 7: องค์ประกอบต้องมีคุณสมบัติ hasLayout ที่ตั้งค่าเป็นจริง คุณสมบัตินี้มีอยู่ใน IE เท่านั้น และคุณสามารถอ่านเพิ่มเติมได้ เช่น บน Habré

อีกวิธีในการตั้งค่าความโปร่งใสโดยใช้ CSS ใน IE8 คือการใช้วิธีต่อไปนี้ (สังเกตความคิดเห็น):

#myElement (ตัวกรอง: progid: DXImageTransform.Microsoft.Alpha (ความทึบ = 40); / * ทำงานใน IE6, IE7 และ IE8 * / -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (ความทึบ = 40)"; / * IE8 เท่านั้น * /)

บรรทัดแรกจะใช้ได้กับทุกเวอร์ชันที่ใช้อยู่ ส่วนบรรทัดที่สองใน IE8 เท่านั้น โปรดทราบว่าบรรทัดที่สองใช้คำนำหน้า -ms- และค่าจะถูกยกมา

การตั้งค่าและการเปลี่ยนแปลงความโปร่งใสของ CSS โดยใช้ JavaScript หรือ jQuery

คุณสามารถใช้รหัสต่อไปนี้เพื่อตั้งค่าความโปร่งใส:

Document.getElementById ("myElement") Style.opacity = ".4"; // สำหรับเบราว์เซอร์ส่วนใหญ่ document.getElementById ("myElement") style.filter = "alpha (ความทึบ = 40)"; // สำหรับ IE

แน่นอน ในกรณีนี้ มันง่ายกว่ามากที่จะใช้ jQuery นอกจากนี้ยังใช้ได้กับทุกเบราว์เซอร์:

$ ("# myElement") css ((ความทึบ: .4)); // ใช้งานได้กับทุกบราวเซอร์

คุณสามารถทำให้พร็อพเพอร์ตี้นี้เคลื่อนไหวได้:

$ ("# myElement") เคลื่อนไหว ((ความทึบ: .4), 1000, ฟังก์ชัน () (// ภาพเคลื่อนไหวเสร็จสมบูรณ์ รหัสนี้ใช้ได้กับทุกเบราว์เซอร์));

ฟังก์ชัน RGBA

มีการวางแผนที่จะสนับสนุนช่องอัลฟาใน CSS3 โดยใช้ฟังก์ชัน rgba ฟีเจอร์นี้ใช้งานได้ใน Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+ มันถูกใช้เช่นนี้:

#rgba (พื้นหลัง: rgba (98, 135, 167, .4);)

ในกรณีนี้ พารามิเตอร์สุดท้ายระบุระดับความทึบ

ฟังก์ชัน HSLA

เช่นเดียวกับฟังก์ชันก่อนหน้านี้ CSS3 ยังให้คุณตั้งค่าสีกึ่งโปร่งใสได้โดยใช้ฟังก์ชัน HSLA ซึ่งพารามิเตอร์ได้แก่ Hue, Saturation, Lightness และ Alpha channel (Alpha)

#hsla (พื้นหลัง: hsla (207, 38%, 47%, .4);)

จุดสำคัญเมื่อใช้ฟังก์ชัน rgba และ hsla คือการตั้งค่าความทึบจะไม่ถูกนำไปใช้กับองค์ประกอบย่อย ในขณะที่คุณสมบัติความทึบจะสืบทอดมา

คุณสมบัติ CSS ความทึบมีหน้าที่รับผิดชอบต่อความโปร่งใสขององค์ประกอบ (รูปภาพ ข้อความ บล็อก) ใน html

ไวยากรณ์ความทึบ CSS

โดยที่ค่าสามารถรับค่าจริงได้ในช่วง 0.0 ถึง 1.0 ค่า 1.0 หมายถึงไม่มีความโปร่งใส (ค่าเริ่มต้น)

ตัวอย่าง # 1 ภาพโปร่งใสใน html

ภาพแรกแสดงโดยไม่มีความโปร่งใส ภาพที่สองมีความโปร่งใส 0.5

องค์ประกอบโปร่งแสง

ทำให้ภาพกึ่งโปร่งใสเมื่อโฮเวอร์!

สาธิตแหล่งดาวน์โหลด

ขอบคุณสำหรับความสนใจ!

บทความถัดไป
จะสร้างบล็อก div แบบเลื่อนได้อย่างไร?

orem Ipsum เป็นเพียงข้อความจำลองของอุตสาหกรรมการพิมพ์และการเรียงพิมพ์ Lorem Ipsum เป็นข้อความจำลองมาตรฐานของอุตสาหกรรมตั้งแต่ช่วงทศวรรษที่ 1500 เมื่อเครื่องพิมพ์ที่ไม่รู้จักใช้ห้องครัวประเภทหนึ่งและแย่งชิงเพื่อสร้างหนังสือตัวอย่างประเภท มันมีชีวิตรอดไม่เพียงแค่ห้าศตวรรษ แต่ยังกระโดดเข้าสู่การเรียงพิมพ์อิเล็กทรอนิกส์ ยังคงไม่เปลี่ยนแปลงโดยพื้นฐานแล้วมันได้รับความนิยมในปี 1960 ด้วยการเปิดตัวแผ่น Letraset ที่มีเนื้อเรื่อง Lorem Ipsum และล่าสุดด้วยซอฟต์แวร์เผยแพร่บนเดสก์ท็อปเช่น Aldus PageMaker รวมถึง Lorem Ipsum เวอร์ชันต่างๆ
เป็นที่ทราบกันมานานแล้วว่าผู้อ่านจะเสียสมาธิกับเนื้อหาที่อ่านได้ของหน้าเมื่อดูเลย์เอาต์ จุดประสงค์ของการใช้ Lorem Ipsum คือมันมีการกระจายตัวแบบปกติไม่มากก็น้อย เมื่อเทียบกับการใช้ "Content here, content here" ทำให้ดูเหมือนภาษาอังกฤษที่สามารถอ่านได้ แพ็คเกจการเผยแพร่เดสก์ท็อปและโปรแกรมแก้ไขหน้าเว็บจำนวนมากตอนนี้ใช้ Lorem Ipsum เป็นข้อความโมเดลเริ่มต้น และการค้นหา "lorem ipsum" จะเปิดเผยเว็บไซต์จำนวนมากที่ยังอยู่ในช่วงเริ่มต้น เวอร์ชันต่างๆ มีวิวัฒนาการมาหลายปี บางครั้งโดยบังเอิญ บางครั้งก็ตั้งใจ (เติมอารมณ์ขันและอื่นๆ ในทำนองเดียวกัน)

ดังนั้นวันนี้เราจะมาพูดถึง ความโปร่งใสใน htmlหน้า. คุณอาจเจอบล็อคป๊อปอัปแบบโปร่งใส ไม่ว่าจะเป็นแกลเลอรี่รูปภาพหรือแบบฟอร์มการเข้าสู่ระบบบนเว็บไซต์ยอดนิยมบางเว็บไซต์ ความโปร่งใสมีประโยชน์หลายอย่างใน html แล้วมันทำอย่างไรและจะใช้ได้ที่ไหน?

เริ่มต้นด้วย มาทำความเข้าใจว่าเอกสารของเราไม่ได้มีเพียงระนาบจอภาพเดียว แต่โดยทั่วไปแล้ว เป็นแบบสามมิติ ตามที่ฉันกล่าวถึงในบทความ "ดัชนี Z" ดังนั้น แม้แต่เลเยอร์ที่โปร่งใสอย่างสมบูรณ์ หากปรากฏที่ด้านบนของสแต็กการแสดงผล ก็จะบล็อกการเข้าถึงองค์ประกอบที่เหลือ นี่เป็นหนึ่งในการใช้งานหลักสำหรับกล่องโปร่งใส แม้ว่าโดยปกติแล้วจะใช้เอฟเฟกต์การแรเงา แต่เลเยอร์ที่โปร่งใสทั้งหมดจะทำงานในลักษณะเดียวกัน ตัวอย่างเช่น แกลเลอรีรูปภาพยอดนิยมจำนวนมากใช้งานได้ มีการจัดระเบียบเลเยอร์แรเงาเพื่อแสดงรูปภาพ และควบคุมสำหรับรูปภาพเหล่านั้น ส่วนที่เหลือของหน้าถูก "ปิด" ด้วยเลเยอร์โปร่งใส (กึ่ง) ซึ่งบล็อกการเข้าถึงองค์ประกอบอื่นๆ ทั้งหมดบนหน้า เหล่านั้น. คุณจะไม่สามารถออกจากหน้าได้โดยคลิกที่ลิงก์ใดๆ บนหน้านั้น - ข้อความทั้งหมดถูกปกคลุมด้วยอันเดอร์ เมื่อต้องการกลับไปที่เนื้อหาของไซต์ พวกเขามักจะมีการควบคุมสำหรับการปิดแกลเลอรี แบบฟอร์มการเข้าสู่ระบบ ฯลฯ ควบคุมการแสดง / ซ่อนบล็อกโปร่งใสโดยใช้จาวาสคริปต์ น่าเสียดายที่นี่ไม่มีทางเลือกอื่น หากไม่ใช้งาน ผู้ใช้จะไม่เห็นบล็อกโปร่งใสเลย หรือจะปิดไม่ได้หากไม่ได้ออกจากหน้าปัจจุบัน โปรดทราบว่าคุณสมบัติการมองเห็นหรือการแสดงผลใช้สำหรับสิ่งนี้

ความโปร่งใสถูกจัดระเบียบใน html อย่างไร? โดยทั่วไปการตั้งค่าความโปร่งใสขององค์ประกอบจะไม่รวมอยู่ในข้อกำหนด CSS ดังนั้นคุณต้องใช้คำสั่งหลายคำสั่งพร้อมกันเพื่อสร้าง เบราว์เซอร์บางตัว (เช่น) จะทำงานกับตัวเลือกหนึ่ง กับอีกตัวเลือกหนึ่ง เช่น ใช้ฟังก์ชันตัวกรองในตัว เบราว์เซอร์อื่นๆ ใช้คุณสมบัติ "ทึบ" ซึ่งมีตั้งแต่ 0 (วัตถุโปร่งใสทั้งหมด) ถึง 1 (ทึบแสงทั้งหมด) ตัวอย่างเช่น ในกรณีที่โปร่งใส 30% ให้เขียน " ความทึบ: 0.30; ตัวกรอง: อัลฟา (ความทึบ = 30);" คุณสมบัติดังที่คุณเห็นจากตัวอย่างมีความคล้ายคลึงกัน - เฉพาะในกรณีแรกใช้ตัวเลขตั้งแต่ 0 ถึง 1 ในส่วนที่สองเป็นรายการเปอร์เซ็นต์ ตัวอย่างของบล็อกดังกล่าว:

<สไตล์ div = ตำแหน่ง: สัมบูรณ์ บน: 0 ซ้าย: 0 สีพื้นหลัง: rgb (18, 114, 214); ความกว้าง: 100%; id = "วิดีโอเฟรม">

ตัวอย่างใช้บล็อกการแสดงวิดีโอที่เปิดใช้งานโดยคลิกที่ภาพขนาดย่อของวิดีโอ บล็อกไม่ได้รับความสูงเนื่องจากอาจแตกต่างกันไปตามขนาดหน้าจอและเนื้อหาของหน้า ในการเชื่อมต่อนี้ จะมีการคำนวณแบบไดนามิกเมื่อเปิดวิดีโอ ตัวอย่างของการใช้เทคนิคนี้สามารถเห็นได้ในหน้าหลักของเว็บไซต์ ruscircus.ru ซึ่งฉันทำงานพร้อมกัน

นี่คือความลับทั้งหมดของความโปร่งใสใน html เราใช้ดัชนี z และความทึบเพื่อให้ได้เอฟเฟกต์โปร่งใส และคุณสามารถค้นหาแอปพลิเคชั่นมากมายสำหรับสิ่งนี้ - ทุกอย่างที่นี่ถูก จำกัด ด้วยจินตนาการของคุณเท่านั้น

08.02.2013 ฉันจะตอบคำถามที่ถามในความคิดเห็นคือวิธีทำบล็อกทึบแสงบนบล็อกโปร่งใส ทุกอย่างเรียบง่ายในที่นี้ ไม่ใช่เพื่ออะไรที่ฉันระบุลิงก์ไปยังเนื้อหาเกี่ยวกับดัชนี z ในเนื้อหา คุณต้องสร้างบล็อกอื่นด้วยดัชนี z ที่ใหญ่กว่าบล็อกโปร่งใส ในเวลาไม่กี่นาที ฉันได้ร่างตัวอย่างแล้ว บล็อก:

<สไตล์ div = ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; สีพื้นหลัง: rgb (18, 114, 214); ความกว้าง: 100%; ความสูง: 100%; ความทึบ: 0.30; ตัวกรอง: อัลฟา (ความทึบ = 30); การมองเห็น: ซ่อน; ดัชนี z: 1; " id = "วิดีโอเฟรม"> <div id = สไตล์ "VideoFrame2" = ตำแหน่ง: สัมบูรณ์ บน: 25% ซ้าย: 25% สีพื้นหลัง: สีขาว ความกว้าง: 50% ความสูง: 50%; ความทึบ: 0.99; ตัวกรอง: อัลฟา (ความทึบ = 99); การมองเห็น: ซ่อน; ดัชนี z: 2; " onclick = "จาวาสคริปต์: HideForm ();" >ที่นี่เราเขียนข้อความ</ div>

และฟังก์ชั่นจาวาสคริปต์

< script type= "text/javascript" >ฟังก์ชัน ShowForm () (document.getElementById ("VideoFrame") .style .visibility = "visible"; document.getElementById ("VideoFrame2") .style .visibility = "visible";) ฟังก์ชัน HideForm () (document.getElementById (" VideoFrame ") .style .visibility =" hidden "; document.getElementById (" VideoFrame2 ") .style .visibility =" hidden ";)

ฟังก์ชั่นแรกแสดงบล็อกโปร่งใส (พร้อมกับบล็อกข้อความทึบแสง) - สามารถแนบไปกับปุ่มได้ ลิงค์ ฯลฯ ฟังก์ชั่นที่สองที่ฉันมีนั้นผูกติดอยู่กับการคลิกเมาส์บนบล็อกที่มีข้อความ - มันซ่อนบล็อกโปร่งใส

หวังว่าจะชี้แจงวิธีการทำงาน ถ้าไม่ใช่ก็ถามคำถาม