เรามาพูดถึงพื้นฐานโดยไม่ต้องละเอียดเกินไป บางครั้งส่วนหน้าจะเผชิญกับความจำเป็นในการเบลอพื้นหลังแต่ต้องมีเนื้อหาที่ชัดเจนก่อน มาดูเอฟเฟกต์กันก่อน:
ต่อไปนี้เป็นการใช้งานเฉพาะ:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>เบลอพื้นหลัง</title></head><body> <div class=main><!-- ต่อไปนี้ พื้นหลังเบลอและเนื้อหาอื่นๆ ชัดเจน--><!-- ชั้นเนื้อหา--> <div class=banner> <div class=banner-contain> <h1>ฉันเป็นเนื้อหา</h1> </div> <! เลเยอร์พื้นหลัง --> <div class=banner-bg></div> </div> </div> <style> .main{ ความกว้าง: 100%; } .banner{ ความกว้าง: 100%; .banner-bg{ width: 100%;/*ความกว้างเต็มหน้าจอ*/ padding-top: 52.734%;/*ความสูงของภาพหารด้วยความกว้างเพื่อให้ได้ค่านี้*/ พื้นหลัง: url(test.jpg)ตรงกลาง ไม่ทำซ้ำ;/*จุดศูนย์กลางทั้งสองอยู่ในแนวนอนและแนวตั้งตามลำดับ*/ ขนาดพื้นหลัง: 100%;/*พื้นหลังกระจายในแนวนอน*/ filter:blur(10px); ค่าเบลอ ยิ่งมากก็ยิ่งเบลอ*/ } .banner-contain{ position: ABSOLUTE;/*ตั้งค่าตำแหน่งสัมบูรณ์ของเลเยอร์เนื้อหา*/ width: 100%; text-align: center; : : 6;/*นำเนื้อหาไปไว้ด้านบน*/ Margin-top: 6%; } </style></body></html> 1. การใช้งานแบบปรับเปลี่ยนได้:ตั้งค่า padding-top ของแท็ก div เป็นเปอร์เซ็นต์ ค่า Padding และ Margin คำนวณตามความกว้างมากกว่าความสูงของหน้าจอ ดังนั้นคุณจึงสามารถตั้งค่าพื้นที่ที่ปรับเปลี่ยนได้ตามลำดับ เช่น ข้อมูลรูปภาพจะเป็นดังนี้ ดังต่อไปนี้
จากนั้นอัตราส่วนความสูงต่อความกว้างคือ: 540/1024 ซึ่งก็คือประมาณ 52.734% นั่นคือความสูงคือ 52.734% ของความกว้าง ที่นี่ตั้งค่าความกว้างเป็น 100% จากนั้น padding-top ของความกว้างคือ 52.734%*100%
ตั้งค่าสองเลเยอร์ เลเยอร์แรกคือเลเยอร์เบลอพื้นหลัง รองรับคอนเทนเนอร์ div ภายนอกทั้งหมดแบบปรับเปลี่ยนได้ ตั้งค่าเบลอผ่าน filter:blur() อีกอันคือเลเยอร์เนื้อหา ตำแหน่งที่แน่นอน ตั้งค่าดัชนี z เพื่อเพิ่ม เลเยอร์เนื้อหา เลเยอร์ถูกป้องกันไม่ให้ถูกบล็อก เพื่อให้เลเยอร์เนื้อหาไม่ได้รับผลกระทบจากการเบลอ
ข้างต้นคือโค้ดตัวอย่างที่โปรแกรมแก้ไขแนะนำให้คุณที่ส่วนหน้าเพื่อให้พื้นหลังเบลอ แต่มีเนื้อหาที่ชัดเจนและปรับเปลี่ยนได้ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉันและบรรณาธิการ จะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!
หากคุณคิดว่าบทความนี้มีประโยชน์สำหรับคุณ คุณสามารถพิมพ์ซ้ำได้ โปรดระบุแหล่งที่มา ขอขอบคุณ!