วันนี้การสร้างการออกแบบเว็บไซต์กลายเป็นศิลปะจริง นี่ไม่ใช่แค่ชุดขององค์ประกอบหน้าของสีและขนาดที่แน่นอนแบบอักษรของสไตล์ที่แตกต่างและภาพวาดเฉพาะเรื่อง เพื่อทำให้ไซต์แตกต่างจากผู้อื่นเพื่อดึงดูดความสนใจของผู้เข้าชมและนำไปยังองค์ประกอบบางอย่างมีการใช้วิธีการและเครื่องมือจำนวนมาก ในหมู่พวกเขามีคุณสมบัติที่นิยมมากของ CSS - ความโปร่งใส เทคนิคนี้ค่อนข้างทันสมัยและน่าประทับใจและมีการใช้บ่อยครั้ง ความโปร่งใสสามารถมอบให้กับวัตถุต่าง ๆ ในหน้าของเว็บไซต์เช่นข้อความบล็อกทั้งหมดหรือรูปภาพตัวอย่างเช่น มันสามารถทำได้ในรูปแบบที่แตกต่างกัน พิจารณาพวกเขาด้านล่าง
พารามิเตอร์สำหรับการตั้งค่าความโปร่งใสขององค์ประกอบ
พารามิเตอร์ที่อนุญาตให้ปรับระดับองค์ประกอบความโปร่งใสหลายประการ พวกเขาจะใช้ขึ้นอยู่กับเป้าหมายที่เฉพาะเจาะจงเช่นเดียวกับเบราว์เซอร์ที่ออกแบบ "ปรับแต่ง" เหล่านี้รวมถึงคุณสมบัติดังต่อไปนี้:
- ความทึบแสง;
- กรอง;
- ภาพ PNG เป็นพื้นหลัง
ค่าของการเปลี่ยนแปลง "โปร่งใส" cssดังนี้ยิ่งตัวเลขมีขนาดใหญ่เท่าใดระดับความโปร่งใสขององค์ประกอบก็จะยิ่งต่ำลงเท่านั้น ในความทึบแสงนั้นจะแตกต่างกันไปตั้งแต่ 0 ถึง 1 ในตัวกรอง - จาก 10 ถึง 100 นอกจากนี้หลังจะใช้สำหรับเบราว์เซอร์ Interet Explorer และคุณสมบัติความทึบแสงจะใช้สำหรับผู้อื่นทั้งหมด
ความโปร่งใสของรูปภาพ (ตัวแปร)
เริ่มต้นด้วยตัวเลือกเมื่อความโปร่งใสจะปรากฏขึ้นเมื่อคุณวางเมาส์เหนือองค์ประกอบด้วยเคอร์เซอร์ของเมาส์
พิจารณาวิธีการตั้งค่าความโปร่งใสของภาพ CSS มีสองตัวเลือก หากต้องการทำสิ่งนี้คุณต้องลงทะเบียนโดยตรงในรหัสของ html-document ดังต่อไปนี้:
- ระบุเส้นทางไปยังภาพ
- เรากำหนดพารามิเตอร์ของความโปร่งใสเมื่อคุณโฮเวอร์และไม่ สำหรับสิ่งนี้เราใช้คุณสมบัติ onmouseover และ onmouseout ซึ่งเราเขียนความทึบและค่าตัวกรอง
คุณสมบัติเดียวกันสามารถเขียนได้ใน css-document และในซอร์สโค้ดให้เพิ่มเฉพาะลิงก์ ผลลัพธ์จะเหมือนกัน
ความโปร่งใสของข้อความและบล็อคหน้า
สำหรับข้อความหรือบล็อก (ความโปร่งใส div)css แนะนำให้ใช้ตัวเลือกที่คล้ายกับการสร้างภาพโปร่งใส นั่นคือการใช้ไฟล์ css ที่รวมอยู่ซึ่งจะมีการตั้งค่าพารามิเตอร์ที่จำเป็น คุณสามารถไปวิธีที่ง่ายกว่า เมื่อกำหนดสไตล์บล็อกสไตล์ div หรือข้อความ p ให้เพิ่มโค้ด html ต่อไปนี้สำหรับองค์ประกอบ onmouseover และ onmouseout ทั้งสองตัวเลือกทำงานและให้ผลลัพธ์ที่ต้องการ
ความโปร่งใสอย่างต่อเนื่อง
ในบางกรณี อาจจำเป็นต้องตั้งค่าความโปร่งใสของวัตถุ องค์ประกอบการออกแบบ หรือข้อความอย่างถาวร ในสถานการณ์นี้ วิธีแก้ปัญหาทำได้ง่ายกว่าการวางเมาส์ไว้เหนือ
สำหรับองค์ประกอบ css จะตั้งค่าความโปร่งใสด้วยรหัสต่อไปนี้ ในบล็อกสไตล์ div ให้เขียนค่าสำหรับพื้นหลัง (เช่น # ff8800) ความทึบ (เช่น 0.5) รวมถึงความกว้างและช่องว่างภายใน
สำหรับรูปภาพ ให้ป้อนค่าความทึบและค่าตัวกรองลงในโค้ด และระบุเส้นทางไปยังรูปภาพด้วย
วิธี RGBA
มีกรณีการใช้งานอื่นด้วยคุณสมบัตินี้ css: ความโปร่งใสสามารถนำไปใช้กับสีพื้นหลังขององค์ประกอบการออกแบบใดๆ สำหรับสิ่งนี้ จะใช้วิธี RGBA ตัวอักษรสามตัวแรกแสดงถึงสีหลัก (สีแดง ทึบ สีน้ำเงิน) และตัวสุดท้ายคืออัลฟา ซึ่งกำหนดระดับความโปร่งใส การใช้รูปแบบ RGBA เรากำหนดระดับความโปร่งใสโดยระบุเป็นตัวเลขสุดท้าย ตัวอย่างเช่น เช่นนี้ พื้นหลัง: rgba (240,2,33,0.4035)
ข้อสรุป
ดังนั้นการใช้ในระหว่างการทำงานกับการออกแบบเว็บไซต์เป็นคุณสมบัติ "โปร่งใส" ที่เรียบง่าย แต่มีประสิทธิภาพ css คุณสามารถทำให้องค์ประกอบต่างๆ น่าสนใจและเห็นได้ชัดเจนขึ้นโดยใช้ความพยายามเพียงเล็กน้อย ตัวเลือกที่อธิบายไว้สำหรับการตั้งค่าคุณสมบัติความโปร่งใสจะช่วยคุณได้
