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

ส่วนของเว็บไซต์

ตัวเลือกของบรรณาธิการ:

การโฆษณา

บางครั้งจำเป็นต้องสร้างพื้นหลังโปร่งใสสำหรับบล็อกบางบล็อกบนหน้า เอฟเฟกต์นี้สามารถทำได้โดยการสร้างภาพพื้นหลังโปร่งใสในรูปแบบ *.png และตั้งค่าผ่านคุณสมบัติพื้นหลัง: url(“./images/fon.png”); -

การใช้คุณสมบัติ OPACITY

เหตุใดจึงซับซ้อนเช่นนี้หากสามารถทำได้ด้วย ใช้ CSS- มาสร้างบล็อกหลัก (หน้า) และบล็อกที่ซ้อนกัน (บล็อก) บนหน้าซึ่งเราจะตั้งค่าความโปร่งใส ความเข้ากันได้ข้ามเบราว์เซอร์ทำได้ดังนี้: คุณสมบัติสำหรับ อินเทอร์เน็ตเอ็กซ์พลอเรอร์– ตัวกรอง:อัลฟา(ความทึบ=50) ( ค่าความโปร่งใสตั้งแต่ 0 ถึง 100) สำหรับเบราว์เซอร์ที่รองรับมาตรฐาน CSS3 – ความทึบ:0.5 ( ตัวเลขตั้งแต่ 0.0 ถึง 1.0).

รหัส HTML:

องค์ประกอบกึ่งโปร่งใส div.page ( Margin:0 auto; width:450px; height:300px; background:url(../images/3a0fdf3dc1.jpg) no-repeat; border:2px solid #555555 ) div.block ( width :260px ; height:140px; margin-left:94px; border:1px solid #333333; */ opacity:0.5 ) div.block p ( ระยะขอบ:47px 0 0 10px; font-weight:bold; color:#000000; text) -align: ตรงกลาง;

พื้นหลังโปร่งใสสำหรับบล็อก

ผลลัพธ์ :

พื้นหลังโปร่งใสสำหรับบล็อก

ดังที่คุณสังเกตเห็น ความโปร่งใสจะมีผลกับองค์ประกอบย่อยทั้งหมด

พื้นหลังโปร่งใสสำหรับบล็อก

ใน DIV ที่มีคลาสบล็อกและต้องไม่เกินค่าความโปร่งใสของพาเรนต์ นั่นคือทุกสิ่งที่อยู่ในบล็อกนี้จะโปร่งใส จะทำอย่างไรถ้าคุณต้องการปล่อยให้พื้นหลังโปร่งใสสำหรับ div เท่านั้น?

การใช้คุณสมบัติ BACKGROUND-COLOR

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

Div.block ( width:260px; height:140px; margin-top:79px; margin-left:94px; border:1px solid #333333; /* พื้นหลังโปร่งใสเท่านั้น DIV.block */ สีพื้นหลัง: rgba(255, 255 , 255, 0.5); /* สีพื้นหลัง, ความโปร่งใส 0.5*/ )

ผลลัพธ์ :

พื้นหลังโปร่งใสสำหรับบล็อก

ในตัวอย่างข้างต้น ใช้สำหรับสีและพื้นหลัง รูปแบบ RGBA- โดยที่ตัวอักษรสามตัวแรกแทนสีแดง เขียว น้ำเงิน (แดง เขียว น้ำเงิน) ตัวสุดท้ายเป็นสัญลักษณ์ของช่องอัลฟา (a) และระบุ ความโปร่งใสองค์ประกอบขจาก 0.0 ถึง 1.0 .

สีพื้นหลัง: rgba(r, g, b, a);

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

http://cp77.comxa.com/verstka/css-transparent-fon

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

แหล่งที่มาของตัวอย่างเชิงโต้ตอบนี้จัดเก็บไว้ในที่เก็บ GitHub หากคุณต้องการมีส่วนร่วมในโครงการตัวอย่างเชิงโต้ตอบ โปรดโคลน https://github.com/mdn/interactive-examples และส่งคำขอดึงถึงเรา

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

การใช้ความทึบด้วยค่าอื่นที่ไม่ใช่ 1 จะทำให้องค์ประกอบนั้นอยู่ในบริบทการซ้อนทับใหม่

ตัวอย่าง ตัวอย่างพื้นฐาน div ( สีพื้นหลัง: สีเหลือง; ) .light ( ความทึบ: 0.2; /* ข้อความแทบจะมองไม่เห็นกับพื้นหลัง */ ) .ปานกลาง ( ความทึบ: 0.5; /* ข้อความจะมองเห็นได้ชัดเจนยิ่งขึ้นเมื่อเทียบกับพื้นหลัง */ ) .heavy ( ความทึบ: 0.9; /* การมองเห็นข้อความชัดเจนมากเมื่อเทียบกับพื้นหลัง */ ) คุณแทบจะมองไม่เห็นสิ่งนี้ นี้จะง่ายต่อการมองเห็น นี่เป็นเรื่องง่ายมากที่จะเห็น ความทึบที่แตกต่างกันด้วย:โฮเวอร์ img.opacity ( ความทึบ: 1; ตัวกรอง: อัลฟา(ความทึบ=100); /* IE8 และต่ำกว่า */ ซูม: 1; /* ทริกเกอร์ "hasLayout" ใน IE 7 และต่ำกว่า */ ) img.opacity :hover ( ความทึบ: 0..png" alt="MDN logo" width="128" height="146" class="opacity"> Проблемы доступности !}

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

อัตราคอนทราสต์ของสีถูกกำหนดโดยการเปรียบเทียบความสว่างของข้อความกับค่าความทึบและสีพื้นหลังที่ปรับแล้ว เพื่อให้เป็นไปตามแนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) ในปัจจุบัน เนื้อหาข้อความต้องมีอัตราส่วน 4.5:1 และ 3:1 สำหรับข้อความขนาดใหญ่ เช่น ส่วนหัว ข้อความขนาดใหญ่กำหนดเป็น 18.66px หรือใหญ่กว่า หรือ 24px หรือใหญ่กว่า

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

1.0

องค์ประกอบทั้งหมด

เลขที่

ภาพ

ค่าที่ระบุจะถูกตัดแต่งให้อยู่ในช่วง

ตัวเลข

ลำดับที่ไม่ชัดเจนซึ่งกำหนดโดยไวยากรณ์ที่เป็นทางการ

รองรับเบราว์เซอร์

ตารางความเข้ากันได้ในหน้านี้สร้างขึ้นจากข้อมูลที่มีโครงสร้าง หากคุณต้องการมีส่วนร่วมในข้อมูล โปรดตรวจสอบ https://github.com/mdn/browser-compat-data และส่งคำขอดึงถึงเรา

อัปเดตข้อมูลความเข้ากันได้บน GitHub

คอมพิวเตอร์ มือถือ Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome สำหรับ Android Firefox สำหรับ Android Opera สำหรับ Android Safari บน iOS Samsung Internetความทึบ รองรับค่าเปอร์เซ็นต์ความทึบ



การสนับสนุน Chrome เต็มรูปแบบ 1	รองรับ Edge Full 12	Firefox รองรับเต็มที่ 1 รองรับเต็มที่ 1 ไม่รองรับ 1 - 3.5 ด้วยคำนำหน้า ด้วยคำนำหน้า ต้องมีคำนำหน้าผู้ขาย: -moz-	การสนับสนุน IE เต็มรูปแบบ 9	โอเปร่าสนับสนุนอย่างเต็มที่ 9	Safari รองรับเต็มรูปแบบ 2 รองรับเต็มรูปแบบ 2 ไม่รองรับ 1.1 - 2 ด้วยคำนำหน้า ด้วยคำนำหน้า ต้องมีคำนำหน้าผู้ขาย: -khtml-	รองรับ WebView Android เต็มรูปแบบ 1	Chrome Android รองรับเต็มรูปแบบ 18	รองรับ Firefox Android ตัวเต็ม 4	Opera Android รองรับเวอร์ชัน 10.1 เต็มรูปแบบ	Safari iOS รองรับเต็มรูปแบบ 1	Samsung Internet Android รองรับเต็มรูปแบบ ใช่
Chrome รองรับเต็มรูปแบบ 78	Edge ไม่มีหมายเลขรองรับ	Firefox รองรับเต็มรูปแบบ 70	IE ไม่มีหมายเลขรองรับ	Opera ไม่มีหมายเลขรองรับ	Safari ไม่มีหมายเลขรองรับ	รองรับ WebView Android เต็มรูปแบบ 78	รองรับ Chrome Android 78 เต็มรูปแบบ	Firefox Android ไม่รองรับ	Opera Android ไม่รองรับหมายเลข	Safari iOS ไม่มีหมายเลขรองรับ	Samsung Internet Android ไม่รองรับหมายเลข

คำอธิบาย การสนับสนุนแบบเต็ม การสนับสนุนเต็มรูปแบบ ไม่มีการสนับสนุน ไม่มีการสนับสนุน ต้องใช้คำนำหน้าผู้ขายหรือชื่ออื่นเพื่อใช้ ต้องมีคำนำหน้าผู้ขายหรือชื่ออื่นเพื่อใช้

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

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

วิธีที่ 1. คนโบราณ

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

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

วิธีที่ 2. ไม่ใส่ใจ

ในบางกรณีที่เกิดขึ้นไม่บ่อยนัก นักพัฒนาจะแก้ปัญหาในการแนะนำภาพโปร่งแสงโดยการแทรก... ภาพโปร่งแสงสำเร็จรูป! เพื่อจุดประสงค์นี้ จะใช้รูปภาพที่บันทึกในรูปแบบ PNG-24 ที่ให้ไว้ รูปแบบกราฟิกให้คุณตั้งค่าความโปร่งแสงได้ 256 ระดับ

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

ตัวอย่างที่ 1 BODY ( พื้นหลัง: url(http://i75.mindmix.ru/50/90/349050/42/6073342/hhhtttttttt.png); background-size:100%; ) div ( กว้าง: 65%; text- align:center; margin-top: 35px; margin-left: 15%;

อย่างไรก็ตาม วิธีนี้ไม่สะดวกด้วยเหตุผลหลายประการ:

Internet Explorer 6 ไม่ทำงานกับเทคโนโลยีนี้ คุณต้องเขียนโค้ดสคริปต์ให้

คุณไม่สามารถเปลี่ยนสีพื้นหลังใน CSS ได้

หากปิดใช้งานฟังก์ชันการแสดงภาพของเบราว์เซอร์ ก็จะหายไป

วิธีที่ 3. เลื่อนขั้น

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

ค่าพารามิเตอร์จะแตกต่างกันไปในช่วง โดยที่ 0 วัตถุจะมองไม่เห็น และที่ 1 วัตถุจะมองเห็นได้ทั้งหมด อย่างไรก็ตาม มีช่วงเวลาที่ไม่พึงประสงค์อยู่ที่นี่เช่นกัน

ขั้นแรก องค์ประกอบย่อยทั้งหมดจะสืบทอดความโปร่งใส ซึ่งหมายความว่าข้อความที่ป้อนจะ "ส่องผ่าน" ไปพร้อมกับพื้นหลังด้วย

ประการที่สอง Internet Explorer "เปิดจมูก" อีกครั้งและจนถึงเวอร์ชัน 8 จะไม่ทำงานด้วยความทึบ

เพื่อแก้ไขปัญหานี้ ให้ใช้ตัวกรอง: alpha (Opacity=value)

ลองดูตัวอย่าง

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

ตัวอย่างที่ 2 BODY ( พื้นหลัง: url(http://www.uarating.com/news/wp-content/uploads/2016/05/flowers-04-may-2016.jpg) ไม่ซ้ำ; พื้นหลังขนาด:100% ; ) div ( พื้นหลัง: #FFEFD5; ความทึบ: 0.88; ตัวกรอง: alpha(Opacity=88); padding: 25px; text-align:center; ) ในร้านของเรา คุณจะพบกับสีทุกประเภท

วิธีที่ 4 ทันสมัย

ปัจจุบันผู้เชี่ยวชาญใช้เครื่องมือ rgba (r, g, b, a)

ก่อนหน้านั้นผมบอกคุณแล้วว่า RGB เป็นหนึ่งในความนิยม โมเดลสีโดยที่ R รับผิดชอบเฉดสีแดงทั้งหมด G – เฉดสีเขียว และ B – เฉดสีน้ำเงิน

ในกรณีของ พารามิเตอร์ CSSตัวแปร A มีหน้าที่รับผิดชอบในช่องอัลฟ่า ซึ่งจะรับผิดชอบต่อความโปร่งใส

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

รองรับ rgba(r, g, b, a) โดยเริ่มจาก:

โอเปร่าเวอร์ชัน 10;
อินเทอร์เน็ตเอ็กซ์พลอเรอร์ 9;
ซาฟารี 3.2;
ไฟร์ฟอกซ์ 3 เวอร์ชัน

ฉันต้องการทราบ ข้อเท็จจริงที่น่าสนใจ- Internet Explorer 7 อันเป็นที่รักเกิดข้อผิดพลาดเมื่อรวมคุณสมบัติสีพื้นหลังเข้ากับชื่อของสี (สีพื้นหลัง: ทอง) ดังนั้นคุณควรใช้เฉพาะ:

สีพื้นหลัง: rgba (255, 215, 0, 0.15)

และตอนนี้เป็นตัวอย่าง

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

ตัวอย่างที่ 3 BODY ( พื้นหลัง: url(http://www.uarating.com/news/wp-content/uploads/2016/05/flowers-04-may-2016.jpg) ไม่ซ้ำ; พื้นหลังขนาด:100% ; ) .block( สีพื้นหลัง: rgba(255, 228, 196, 0.88); padding: 25px; text-align:center; ) ในร้านของเรา คุณจะพบกับสีทุกประเภท

โปรดทราบว่าเนื้อหาข้อความของบล็อกสามารถมองเห็นได้ทั้งหมด (สีดำ 100%) ในขณะที่พื้นหลังตั้งค่าเป็นช่องอัลฟา 0.88 เช่น 88%.

นี่เป็นการสรุปการตีพิมพ์ สมัครสมาชิกบล็อกของฉันและอย่าลืมเชิญเพื่อน ๆ ฉันขอให้คุณโชคดีในการเรียนรู้ภาษาบนเว็บ! ลาก่อน!

/* 06.07.2006 */

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

เอฟเฟกต์ความโปร่งใสเป็นหัวข้อของบทความนี้ หากคุณสนใจที่จะเรียนรู้วิธีทำให้องค์ประกอบของหน้า HTML โปร่งใสโดยใช้ CSS หรือ Javascript และวิธีการบรรลุความเข้ากันได้ข้ามเบราว์เซอร์ (ทำงานเหมือนกันในเบราว์เซอร์ที่แตกต่างกัน) โดยคำนึงถึง เบราว์เซอร์ไฟร์ฟอกซ์, Internet Explorer, Opera, Safari, Konqueror ได้เลย ยินดีต้อนรับครับ นอกจากนี้ให้พิจารณาด้วย โซลูชั่นสำเร็จรูปเปลี่ยนความโปร่งใสทีละน้อยโดยใช้จาวาสคริปต์

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

โดย symbiosis ฉันหมายถึงการผสมผสานสไตล์ที่แตกต่างเข้าด้วยกัน เบราว์เซอร์ที่แตกต่างกันในหนึ่งเดียว กฎซีเอสเอสเพื่อให้ได้ผลตามที่ต้องการเช่น เพื่อใช้ความเข้ากันได้ข้ามเบราว์เซอร์

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

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

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

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

ฟังก์ชัน setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // หากไม่มีองค์ประกอบที่มี id ที่ระบุหรือเบราว์เซอร์ ไม่สนับสนุนวิธีใดวิธีหนึ่งที่รู้จักในการควบคุมความโปร่งใสถ้า (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 100; // หากตั้งค่าความโปร่งใสไว้แล้ว ให้เปลี่ยนผ่านคอลเลกชันตัวกรอง มิฉะนั้น เพิ่มความโปร่งใสผ่าน style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+"); // เพื่อไม่ให้เขียนทับตัวกรองอื่นๆ ให้ใช้ "+=" ) else // เบราว์เซอร์อื่นๆ elem.style = nOpacity; ) ฟังก์ชัน getOpacityProperty() ( if ( typeof document.body.style.opacity == "string") // รองรับ CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) ส่งคืน "ความทึบ";

อย่างอื่นถ้า (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 และรุ่นก่อนหน้า Firefox 0.8 ส่งคืน "MozOpacity";

อย่างอื่นถ้า (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 ส่งคืน "KhtmlOpacity";

อย่างอื่นถ้า (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ ส่งคืน "ตัวกรอง";

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

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

โซลูชั่นพร้อม เราใช้ไลบรารี opacity.js

img ( filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) // สร้างกฎสำหรับการเปลี่ยนความโปร่งใส: ตั้งชื่อกฎ เริ่มต้นและสิ้นสุดความโปร่งใส เช่น ตลอดจนความล่าช้าของพารามิเตอร์เสริมที่ส่งผลต่อความเร็วของการเปลี่ยนแปลงความโปร่งใส fadeOpacity.addRule("oR1", .3, 1, 30); 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" />

ขั้นตอนพื้นฐาน:

เราเชื่อมต่อไลบรารี่ของฟังก์ชัน

เรากำหนดกฎโดยใช้เมธอด fadeOpacity.addRule()

เราเรียกเมธอด fadeOpacity() เพื่อเปลี่ยนความโปร่งใสจากค่าเริ่มต้นไปเป็นค่าสุดท้าย หรือ fadeOpacity.back() เพื่อกลับไปเป็นค่าเริ่มต้นของระดับความโปร่งใส

มาเคี้ยวกันเถอะ

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

กฎถูกกำหนดโดยใช้เมธอด fadeOpacity.addRule

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

ข้อโต้แย้ง:

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

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

:โฮเวอร์เพื่อเปลี่ยนความโปร่งใสได้อย่างง่ายดาย

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

a:hover img ( ตัวกรอง: progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; )

โปรดทราบว่ารูปภาพถูกวางไว้ภายในองค์ประกอบ A ความจริงก็คือ Internet Explorer จนถึงเวอร์ชัน 6 เข้าใจ pseudo-selector:hover เฉพาะที่เกี่ยวข้องกับลิงก์เท่านั้น ไม่ใช่องค์ประกอบใด ๆ ตามที่ควรจะเป็นใน CSS (สถานการณ์ ได้รับการแก้ไขแล้วใน IE7)

ความโปร่งใสและข้อความหยักใน IE

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

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

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

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

ชื่อเอกสาร .myClass ( float: left; margin-right: 5px; opacity: 0.4; filter: alpha(opacity=40); /*for IE8 และรุ่นก่อนหน้า*/ ) พยายาม "

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

Pseudo-class:hover ช่วยให้คุณสามารถเปลี่ยนแปลงได้ รูปร่างองค์ประกอบต่างๆ เมื่อคุณวางเคอร์เซอร์ของเมาส์ไว้เหนือองค์ประกอบเหล่านั้น เราจะใช้คุณสมบัตินี้เพื่อทำให้รูปภาพสูญเสียความโปร่งใสเมื่อวางเมาส์เหนือ:

ชื่อเอกสาร img ( float: left; margin-right: 5px; opacity: 0.4; filter: alpha(opacity=40); /*for IE8 และรุ่นก่อนหน้า*/ ) img:hover ( opacity: 1.0; filter: alpha( opacity= 100); พยายาม "

ความโปร่งใสของพื้นหลัง

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

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

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

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

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

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

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

เนื้อความ ( พื้นหลังรูปภาพ: url(img.jpg); ) .prim1 ( กว้าง: 400px; ระยะขอบ: 30px 50px; สีพื้นหลัง: #ffffff; เส้นขอบ: 1px สีดำทึบ; น้ำหนักแบบอักษร: ตัวหนา; ความทึบ: 0.5; ตัวกรอง : alpha(opacity=70); /*สำหรับ IE8 และรุ่นก่อนหน้า*/ text-align: center; .prim2 ( width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px solid black ; Font-Weight: Bold; text-align: center ) ลอง »

หมายเหตุ: ไม่รองรับค่า RGBA ใน IE8 ขึ้นไป รุ่นก่อนหน้า- หากต้องการประกาศสีทางเลือกสำหรับเบราว์เซอร์รุ่นเก่าที่ไม่รองรับค่าสีอัลฟ่า คุณควรระบุสีนั้นก่อนค่า RGBA: background: rgb(255,255,0); พื้นหลัง: RGBA(255,255,0,0.5);

อ่าน: