การมองเห็น CSS - โซลูชันข้ามเบราว์เซอร์ - 3.8 จาก 5 ขึ้นอยู่กับ 6 คะแนนโหวต

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

วิธีตั้งค่าความโปร่งใสขององค์ประกอบใด ๆ

CSS3 มีพลังของความทึบสำหรับการสร้างองค์ประกอบที่โปร่งใส ดังนั้นคุณสามารถ zastosovuvat ไปยังองค์ประกอบใดก็ได้ ที่ ได้รับอำนาจєค่าจาก 0 ถึง 1 เป็นสัญลักษณ์ของขั้นตอนความโปร่งใส De 0 - ความโปร่งใสของ povna (สำหรับการล็อคองค์ประกอบทั้งหมด) และความทึบ 1 povna ค่าเขียนเป็นเศษส่วน: 0.1, 0.2, 0.3 เพียง

ตัวอย่าง Vikoristan:

ความโปร่งใสข้ามเบราว์เซอร์

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

ความทึบของ Power CSS3 เบราว์เซอร์ Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+

ดีมาก :) เบราว์เซอร์จามรี Internet Explorerจนถึงเวอร์ชัน 9.0 ไม่ได้คำนึงถึงพลังของความทึบและการสร้างความโปร่งใสซึ่งเบราว์เซอร์จำเป็นต้องได้รับพลังของตัวกรองและค่าของอัลฟ่า (ความทึบ = X) ซึ่ง X เป็นตัวเลขใน ช่วง 0 ถึง 100 นอกเหนือจากที่กำหนดค่าความโปร่งใส 0 คือความโปร่งใสเต็มที่ และ 100 คือความทึบเต็มที่

ราคาเท่าไหร่คะ เบราว์เซอร์ Firefoxสูงถึงเวอร์ชัน 3.5 พลังชนะ -moz-opacity แทนที่ความทึบ

เบราว์เซอร์ดังกล่าว เช่น Safari 1.1 และ Konqueror 3.1 ซึ่งได้รับแรงบันดาลใจจากเอ็นจิ้น KHTML ใช้ความทึบของความโปร่งใสในการสแกน: -khtml-opacity

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

ตัวกรอง: อัลฟา (ความทึบ = 50); /* ความทึบสำหรับ IE */ -moz-opacity: 0.5; /* Mozilla 3.5 ภาพขนาดย่อและด้านล่าง */ -khtml-opacity: 0.5; /* การตัดแต่ง Konqueror 3.1 และ Safari 1.1 */ ความทึบ: 0.5; /* ช่วยแก้บราวเซอร์ */

ความโปร่งใสขององค์ประกอบต่างๆ

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

ความคมชัดของภาพ CSS

ลองมาดูตัวเลือกในการสร้างทารกโปร่งแสงกัน ก้นจู่โจมของรูปแรกไม่มีความโปร่งใส อีกอันสามารถมีความโปร่งใส 50% ที่สาม 30%

ผลลัพธ์:

การมองเห็น CSS เมื่อวางเมาส์เหนือรูปภาพ

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

คุณสามารถเห็นผลในการสาธิต

ล้างพื้นหลังด้วย CSS

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

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

รหัสตัวอย่าง:

แกนกับผลลัพธ์ของรหัสที่วางไว้:

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

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

สำหรับผู้เริ่มต้น เราจะเห็นว่าเอกสารที่เรามีไม่ได้เป็นเพียงพื้นที่ราบเดียวของจอภาพ แต่ดูเหมือน 3 โลก ซึ่งฉันเดาได้จากบทความ "ดัชนี Z" Vidpovidno navit zovsim prozory ball พิงด้านบนของกองหมักปิดกั้นการเข้าถึงองค์ประกอบอื่น ๆ ผู้ที่มีบล็อก zastosuvan prozorikh หลักทั้งหมด โดยไม่คำนึงถึงเสียงที่ได้รับชัยชนะ ผลกระทบของการแรเงาจะถูกสังเกต ฉันจะทำซ้ำลูกบอล prozory ของการฝึกฝนเช่นเดียวกัน ตัวอย่างเช่น มีแกลเลอรี่รูปภาพยอดนิยมมากมาย ลูกบอลแรเงาถูกจัดเรียงเพื่อแสดงรูปภาพ และองค์ประกอบในการจัดการรูปภาพ อย่างอื่นที่ด้านข้างของหน้าปรากฏว่า "ปิด" (เดี่ยว) โดยมีลูกบอลที่ปิดการเข้าถึงองค์ประกอบอื่นๆ ทั้งหมดที่อยู่ด้านข้าง ทูบโต ห้าด้านเมื่อกดยาคแล้วแรงก็ไม่ออกมา - ข้อความทั้งหมดถูกปิดด้วยซับใน หากต้องการเปลี่ยนไปยังเนื้อหาของไซต์ ให้เรียกองค์ประกอบควบคุมเพื่อปิดแกลเลอรี ให้เข้าที่เข้าทางได้ดี เพื่อแสดง/แนบกับบล็อกโปร่งใสสำหรับจาวาสคริปต์เพิ่มเติม น่าเสียดายที่นี่ไม่มีทางเลือกอื่นสำหรับ youmu ไม่มี yogo vikoristannya koristuvach หรืออย่างอื่นคุณไม่สามารถปัง บล็อกโปร่งใสมิฉะนั้นคุณจะไม่สามารถปิดได้โดยไม่เติมด้านการไหล ฉันจะกำหนดสิ่งที่ชนะเพื่อจุดประสงค์ในการมองเห็นพลังงานหรือการแสดงผล

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

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

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

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

ฉันทำงานใน javascript

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

สามารถนำความกระจ่างมาสู่ผู้ที่ทำงาน ถ้าไม่ก็ใส่อาหาร

การสร้างพื้นหลังโปร่งใสใน HTML และ CSS (ความทึบและ RGBA อย่างมีประสิทธิภาพ)

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

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

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

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

HTML 5 CSS 3 IE 9

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

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

Napіvprozora tlo HTML 5 CSS 3 IE 9

ในการสร้างเอฟเฟกต์ความโปร่งใสใน CSS จะใช้พลังของความทึบ

เบราว์เซอร์ IE8 และเวอร์ชันก่อนหน้ารองรับพลังงานทางเลือก - filter:alpha(opacity=x) ดังนั้น "x" จึงสามารถยอมรับค่าได้ตั้งแต่ 0 ถึง 100 ค่าที่น้อยกว่าจะทำให้องค์ประกอบชัดเจนขึ้น

เบราว์เซอร์อื่น ๆ ทั้งหมดเคารพในความสามารถของ CSS มาตรฐานของความทึบ ดังนั้นพวกเขาจึงสามารถยอมรับค่าเช่น 0.0 ถึง 1.0 ค่ายิ่งต่ำ องค์ประกอบจะโปร่งใสมากขึ้น:

พยายาม

ความโปร่งใสเมื่อโฮเวอร์

Pseudo-class:hover ให้คุณเปลี่ยนรูปลักษณ์ขององค์ประกอบเมื่อวางเมาส์เหนือเมาส์ เรากำลังเร่งความเป็นไปได้เพื่อให้ภาพเมื่อวางเมาส์เหนือความชัดเจน:

พยายาม

พื้นหลังโปร่งใส

มีสองวิธีที่เป็นไปได้ในการสร้างองค์ประกอบ: พลังของความทึบ ซึ่งอธิบายข้างต้น และระบายสีพื้นหลังในรูปแบบ RGBA

คุณอาจทราบรูปแบบสีของรูปแบบ RGB แล้ว RGB (แดง เขียว น้ำเงิน - แดง เขียว น้ำเงิน) เป็นระบบสีที่กำหนดวิธีการผสมสีแดง เขียว และน้ำเงิน ตัวอย่างเช่น สำหรับการตั้งค่าสีเหลืองสำหรับข้อความ คุณสามารถเร่งความเร็วได้ว่าคุณเป็นหนึ่งในการทำให้มึนงงที่กำลังจะมาถึงหรือไม่:

สี: rgb(255,255,0); สี: rgb(100%,100%,0);

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

สี RGBA ที่คลุมเครือคล้ายกับไวยากรณ์ของกฎ RGB มาตรฐาน อย่างไรก็ตาม นอกเหนือจากนั้น เราจะต้องระบุค่า RGBA (แทนที่ RGB) และตั้งค่าความโปร่งใสเพิ่มเติมอันดับที่สิบหลังจากค่าสีในช่องว่างระหว่าง 0.0 (ความโปร่งใสทั้งหมด) ถึง 1 (ความทึบเต็ม)

สี: rgba(255,255,0,0.5); สี: rgba(100%,100%,0,0.5);

ความแตกต่างระหว่างพลังของความทึบและ RGBA อยู่ในความจริงที่ว่าพลังของความทึบ zastosovuyu ความโปร่งใสต่อองค์ประกอบทั้งหมด เพื่อให้องค์ประกอบทั้งหมดโปร่งใส และ RGBA ให้คุณตั้งค่าความโปร่งใสให้กับส่วนนอกขององค์ประกอบ (เช่น เฉพาะข้อความหรือพื้นหลัง):

เนื้อหา ( background-image: url(img.jpg); ) .prim1 ( width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter : alpha(opacity=70);/*สำหรับ IE8 และรุ่นที่ใหม่กว่า*/ text-align: center; 1px solid black; font-weight: bold; text-align: center; ) ลอง »

หมายเหตุ: IE8 หรือเบราว์เซอร์รุ่นเก่าไม่รองรับค่า RGBA ในการสร้างทางเลือกสีสำหรับเบราว์เซอร์รุ่นเก่า เพื่อไม่ให้ตัดค่าสีด้วยช่องอัลฟา ให้ตั้งค่าเป็นค่า RGBA แรก: พื้นหลัง: rgb(255,255,0); พื้นหลัง: rgba(255,255,0,0.5);

/* 06.07.2006 */

ความโปร่งใสของ CSS (ความทึบของ CSS, ความทึบของจาวาสคริปต์)

ผลกระทบของความโปร่งใสเป็นหัวข้อของบทความนี้ คุณรู้วิธีทำให้องค์ประกอบของ html-side โปร่งใส วิธีใช้ CSS หรือ Javascript ได้อย่างไร และวิธีบรรลุความเข้ากันได้ของเบราว์เซอร์ข้าม (งานเดียวกันในเบราว์เซอร์ต่างๆ) ด้วยการปรับปรุงเบราว์เซอร์ใน Firefox, Internet Explorer, Opera, Safari , Konqueror ยินดีต้อนรับ ก่อนหน้านั้น มาดูวิธีแก้ปัญหาของการเปลี่ยนแปลงความชัดเจนทีละขั้นตอนสำหรับความช่วยเหลือของ JavaScript

ความทึบของ CSS (ความโปร่งใสของ CSS)

CSS ความทึบ symbiosis

ภายใต้การพึ่งพาอาศัยกัน ฉันอาจต้องการรวมสไตล์ที่แตกต่างกันสำหรับเบราว์เซอร์ต่างๆ ไว้ในกฎ CSS เดียวเพื่อลบเอฟเฟกต์ที่จำเป็นออกไป นั่นคือ สำหรับการใช้งานความเข้ากันได้ข้ามเบราว์เซอร์

ตัวกรอง:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-ความทึบ: 0.5; /* Mozilla 1.6 และต่ำกว่า */ -khtml-opacity: 0.5; /* Konquer 3.1, Safari 1.1 *//* CSS3 - Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9*/

อันที่จริง เราต้องการกฎข้อแรกและข้อสุดท้าย สำหรับ IE5.5+ และเบราว์เซอร์ เพื่อทำความเข้าใจความทึบของ CSS3 และกฎสองข้อที่อยู่ตรงกลางนั้นชัดเจนไม่อาย แต่อย่าแม้แต่จะเคารพ (ขึ้นอยู่กับคุณ คุณต้องเหม็น)

ความทึบของ Javascript symbiosis

ตอนนี้ เราสามารถลองติดตั้งความโปร่งใสผ่านสคริปต์ด้วยการแก้ไขคุณสมบัติของเบราว์เซอร์ต่างๆ ดังที่อธิบายไว้ข้างต้น

ฟังก์ชัน setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) ส่งคืน; // ยังคงไม่ใช้องค์ประกอบและกำหนดรหัส มิฉะนั้น เบราว์เซอร์จะไม่สนับสนุนฟังก์ชันดั้งเดิมของวิธีการที่ชัดเจนในการมองเห็น if (opacityProp=="filter") // Internet Exploder 5.5+ (nOpacity *= 100; // หากตั้งค่าความโปร่งใสไว้แล้ว สามารถเปลี่ยนผ่านคอลเล็กชันตัวกรอง มิฉะนั้น คุณสามารถเพิ่มความโปร่งใสผ่าน style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || วาร์ oAlpha elem.filters.alpha; ถ้า (oAlpha) oAlpha.opacity = nOpacity; อื่น elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; // เพื่อไม่ให้เขียนทับตัวกรองอื่น เราสามารถ "+=") อื่น // บราวเซอร์อื่นๆ elem.style=nความทึบ; ) ฟังก์ชัน getOpacityProperty() ( if (typeof document.body.style.opacity == "string") // สอดคล้องกับ CSS3 (Moz 1.7+, Safari 1.2+, Opera 9)ส่งคืน "ความทึบ"; อื่น if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 และรุ่นน้อง Firefox 0.8ส่งคืน "MozOpacity"; อื่น if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 ส่งคืน "KhtmlOpacity"; อื่น if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ ส่งคืน "ตัวกรอง"; คืนค่าเท็จ; //ไม่มีความชัดเจน }

ฟังก์ชันใช้อาร์กิวเมนต์สองอย่าง: sElemId - id ขององค์ประกอบ nOpacity - หมายเลขคำพูดตั้งแต่ 0.0 ถึง 1.0 ซึ่งตั้งค่าความโปร่งใสของรูปแบบความทึบ CSS3

ฉันคิดว่าควรอธิบายโค้ด setElementOpacity บางตัวที่มาก่อน IE

VaroAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; ถ้า (oAlpha) oAlpha.opacity = nOpacity; อื่น elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")";

คุณสามารถตำหนิอาหารได้ แต่ทำไมไม่ติดตั้งความโปร่งใสด้วยเส้นทางเพื่อดึงดูด (=) power elem.style.filter = "..."; ? จะชนะ "+=" เพื่อเพิ่มไปยังส่วนท้ายของตัวกรองแถวกำลังได้อย่างไร คำตอบนั้นง่าย เพื่อไม่ให้ "เขียนทับ" ตัวกรองอื่นๆ และถ้าเป็นเช่นนั้น หากคุณเพิ่มตัวกรองในอันดับดังกล่าวโดยฉับพลัน คุณจะไม่เปลี่ยนค่าของตัวกรองนั้นก่อนหน้านี้ แต่ถ้าเป็นเพียงการเพิ่มที่ส่วนท้ายของแถวของพลัง ก็ไม่ถูกต้อง เพื่อให้เป็นตัวกรองก่อนการแทรก มีความจำเป็นต้องจัดการผ่านคอลเลกชันของตัวกรองที่ตั้งค่าเป็นองค์ประกอบ: elem.filters (แต่ตรวจสอบ เนื่องจากยังไม่ได้กำหนดตัวกรองให้กับองค์ประกอบ ดังนั้น เป็นไปไม่ได้ที่จะจัดการกับมันผ่านคอลเลกชันที่กำหนด) การเข้าถึงองค์ประกอบของคอลเลกชันสามารถทำได้ทั้งบนชื่อตัวกรองหรือบนดัชนี อย่างไรก็ตาม ตัวกรองสามารถตั้งค่าเป็นสองสไตล์ ได้แก่ สไตล์ IE4 แบบสั้น หรือสไตล์ IE5.5+ ซึ่งครอบคลุมอยู่ในโค้ด

การเปลี่ยนแปลงความโปร่งใสขององค์ประกอบอย่างราบรื่น

โซลูชั่นพร้อม ห้องสมุดชัยชนะ opacity.js

fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)"src="/img/strawberry.jpg" width="100" height="80" /> fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)"src="/img/tomato.jpg" width="82" height="100" /> fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)"src="/img/sweet_cherry.jpg" width="98" height="97" />

การตัดขั้นพื้นฐาน:

1. การเชื่อมต่อไลบรารีของฟังก์ชัน
2. Viznazhemo กฎวิธี vikoristovuyuchi fadeOpacity.addRule();
3. คลิกวิธี จางความทึบ ()เปลี่ยนความโปร่งใสจากค่า cob เป็นค่าสุดท้ายหรือ fadeOpacity.back()เปลี่ยนเป็นค่า cob ที่มีความชัดเจนเท่ากัน

รอซโฮเวโม

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

กฎถูกกำหนดให้กับวิธีการเพิ่มเติม fadeOpacity.addRule

ไวยากรณ์: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay)

อาร์กิวเมนต์:

• sRuleName - ชื่อของกฎที่ตั้งไว้เพียงพอ
• nStartOpacity และ nFinishOpacity - cob และสิ้นสุดการเปิด ตัวเลขในช่วง 0.0 ถึง 1.0
• nDelay - หน่วงเวลาเป็นมิลลิวินาที (อาร์กิวเมนต์ neobov'yazkovy สำหรับการล็อก จนถึง 30)

เฟดเดอร์การมองเห็นนั้นสามารถทำได้โดยใช้เมธอด fadeOpacity(sElemId, sRuleName) โดยที่ sElemId คือ id ขององค์ประกอบ และ sRuleName คือชื่อของกฎ ในการหมุนการมองเห็นของทางออกแคมป์ ให้เปลี่ยนเมธอด fadeOpacity.back(sElemId)

:hover เพื่อเปลี่ยนการมองเห็นอย่างง่าย

ฉันจะกำหนดด้วยว่าสำหรับการเปลี่ยนแปลงความโปร่งใสอย่างง่าย (แต่ไม่ใช่การเปลี่ยนแปลงทีละขั้นตอน) ตัวเลือกหลอกนั้นเหมาะสม :โฮเวอร์ซึ่งช่วยให้คุณสามารถกำหนดรูปแบบขององค์ประกอบในขณะที่วางเมาส์ไว้เหนือเมาส์ใหม่

โปรดทราบว่ารูปภาพจะอยู่ตรงกลางขององค์ประกอบ A ทางด้านขวา ใน Internet Explorer ถึงเวอร์ชัน 6 จะเข้าใจ :hover pseudo-selector เท่านั้น 100% posilan และไม่ใช่องค์ประกอบดังกล่าว เช่น โกหกกับ CSS (ใน IE7 ตำแหน่งได้รับการแก้ไขแล้ว)

ความชัดเจนและข้อความหยักใน IE

ทางออกของ Windows XP คือการปรับแบบอักษรหน้าจอให้เรียบโดยวิธีการ แบบใสและในขณะเดียวกันก็เกิดผลข้างเคียงใน IE เมื่อใช้วิธีการปรับให้เรียบ ในความเห็นของเรา เนื่องจากการมองเห็นองค์ประกอบที่มีข้อความถูกบล็อกเมื่อเปิดใช้งานวิธีการปรับให้เรียบ ClearType ข้อความจะหยุดแสดงตามปกติ (ข้อความตัวหนา - ตัวหนาตัวอย่างเช่น หากต้องการเพิ่มสิ่งประดิษฐ์ที่แตกต่างกันเป็นสองเท่า อาจปรากฏในลักษณะนั้น เช่น ในรูปที่ดูเหมือนข้อความหยัก) เพื่อที่จะแก้ไขตำแหน่ง สำหรับ IE คุณต้องตั้งค่าสีพื้นหลัง, CSS power สีพื้นหลังซึ่งเป็นองค์ประกอบที่ความโปร่งใสหยุดนิ่ง โชคดีที่ IE7 แก้ไขข้อผิดพลาดแล้ว