เอฟเฟ็กต์ภาพเบลอ CSS เอฟเฟกต์เบลอข้ามเบราว์เซอร์โดยใช้ CSS การครอบตัดขอบของรูปภาพ
CSS3 มีคุณสมบัติใหม่มากมายที่สามารถเพิ่มความเร็วให้กับเลย์เอาต์ขององค์ประกอบบางอย่างของหน้าได้อย่างมาก ตัวอย่างเช่น ตัวกรอง CSS ซึ่งหนึ่งในนั้นเราจะพูดถึงในวันนี้
เราแต่ละคนมีโอกาสสังเกตเอฟเฟกต์เบลอบนเพจอย่างน้อยหนึ่งครั้ง บ่อยครั้งที่ไลบรารี jQuery bjurjs ถูกใช้เพื่อสร้างมันขึ้นมา อย่างไรก็ตาม ไม่แนะนำให้ใช้ jQuery ในทุกไซต์ และเทคโนโลยีไม่ได้หยุดนิ่ง: ตอนนี้เราสามารถใช้โซลูชันกับ CSS บริสุทธิ์- เราจะลองไหม?
ตัวอย่างของมาร์กอัปที่ง่ายที่สุด:
ยินดีต้อนรับสู่เว็บไซต์ของเรา!
ดังนั้น div พาเรนต์ที่มีคลาส wrapper จึงถูกกำหนดไว้ ซึ่งทำหน้าที่เป็นคอนเทนเนอร์สำหรับ div ที่ซ้อนกันสองรายการ โดย wrapper ภายในจะมีข้อความต้อนรับ และความเบลอจะเป็นรูปภาพที่ควรใช้เอฟเฟกต์เบลอ
มาดูสไตล์กัน
Wrapper ( ตำแหน่ง : สัมพันธ์ ; ความกว้าง : 500px ; ความสูง : 500px ; ระยะขอบ : 0 อัตโนมัติ ; ) .inner-wrapper , .blur ( ตำแหน่ง : แน่นอน ; ความกว้าง : 500px ; ความสูง : 300px ; ซ้าย : 0 ; บน : 0 ; ล่าง : 0 ; ขวา : 0 ;
อย่างที่คุณเห็น บล็อกลูกอยู่ในตำแหน่งที่แน่นอนและอยู่ในระดับเดียวกัน ประเด็นก็คือเอฟเฟกต์เบลอจะถูกนำไปใช้กับข้อความทักทายด้วยซึ่งเราต้องการหลีกเลี่ยง ดังนั้นจึงเป็นการดีกว่าที่จะควบคุมตำแหน่งของบล็อกที่สัมพันธ์กันโดยใช้ z-index มาทำสิ่งนี้และตั้งค่าพื้นหลังที่จำเป็นสำหรับ .blur:
กระดาษห่อด้านใน ( z-index : 100 ; color : #fff ; text-align : center ; text-shadow : 0 0 5px rgba ( 0 , 0 , 0 , .5 ); ) .blur ( z-index : 99 ; ภาพพื้นหลัง : url(image.png) ;
บน ช่วงเวลานี้เราได้หน้าง่าย ๆ พร้อมรูปภาพและข้อความ:
ถึงเวลาใช้เวทย์มนตร์แล้ว! อนิจจา Firefox ยังไม่รองรับตัวกรอง CSS ดังนั้นเคล็ดลับเล็กน้อยจะช่วยได้: คุณต้อง "ป้อน" ไฟล์ svg ด้วยเนื้อหาต่อไปนี้:
และระบุเส้นทางไปยังไฟล์นี้และยังอ้างอิงถึง ตัวกรองที่ต้องการ- ในกรณีของเรา มีตัวกรองเพียงตัวกรองเดียว: ตัวกรองที่กำหนดไว้ภายใต้ id blur นี่คือวิธีการแปลงโค้ด css เพื่อให้ได้เอฟเฟกต์เบลอ:
กระดาษห่อด้านใน (ดัชนี z: 100; /* ข้อความไม่เบลอ */สี : #fff ; การจัดแนวข้อความ: กึ่งกลาง; ข้อความเงา : 0 0 5px rgba ( 0 , 0 , 0 , .5 ); ) .blur ( ดัชนี z : 99 ; /* ภาพไม่ชัด */ภาพพื้นหลัง : url(image.png); ขนาดพื้นหลัง : cover ; พื้นหลังซ้ำ : ไม่ซ้ำ ; -webkit-filter : เบลอ (5px ); -moz-filter : เบลอ (5px ); ตัวกรอง: เบลอ (5px); ตัวกรอง : url("blur.svg#blur" ; /* เส้นทางไปยัง svg */ )
และนี่คือเวอร์ชันสุดท้ายที่ใช้เอฟเฟกต์เบลอ:
ข้อเสียเปรียบเพียงอย่างเดียว: ขอบเขตความเบลอที่ไม่ชัดเจนซึ่งไปไกลกว่านั้น องค์ประกอบหลัก- มักเป็นเช่นนี้ ผลพลอยได้อาจไม่พึงปรารถนา คุณสามารถเล่นกับรัศมีเบลอหรือใช้ overflow: ซ่อนเร้น
ตัวกรอง CSS3เล่นในเบราว์เซอร์ เอฟเฟ็กต์ภาพคล้ายกับฟิลเตอร์ Photoshop คุณสามารถเพิ่มตัวกรองได้ไม่เฉพาะกับรูปภาพเท่านั้น แต่ยังรวมถึงองค์ประกอบที่ไม่ว่างเปล่าด้วย
ชุดตัวกรองไม่ได้จำกัดอยู่เพียงตัวกรองที่ติดตั้งไว้ล่วงหน้าในเบราว์เซอร์ คุณยังสามารถใช้ตัวกรอง SVG ได้โดยการดาวน์โหลดจากลิงก์พร้อมกับองค์ประกอบ svg
เดิมตัวกรองถูกสร้างขึ้นโดยเป็นส่วนหนึ่งของข้อกำหนด SVG งานของพวกเขาคือการใช้เอฟเฟกต์แบบตารางพิกเซลกับ กราฟิกแบบเวกเตอร์- ด้วยการรองรับ SVG ในเบราว์เซอร์ ตอนนี้คุณสามารถใช้เอฟเฟกต์เหล่านี้ในเบราว์เซอร์ได้โดยตรง
เบราว์เซอร์จะประมวลผลพิกเซลของหน้าทีละพิกเซล โดยใช้เอฟเฟกต์ที่ระบุและวาดผลลัพธ์ไว้ด้านบนของต้นฉบับ ดังนั้นด้วยการใช้ฟิลเตอร์หลายตัว คุณสามารถสร้างเอฟเฟ็กต์ที่แตกต่างกันได้ ยิ่งมีตัวกรองมากเท่าใด เบราว์เซอร์ก็จะใช้เวลานานในการแสดงผลหน้าเว็บมากขึ้นเท่านั้น
คุณสามารถใช้ตัวกรองหลายตัวพร้อมกันได้ วิธีคลาสสิกการใช้เอฟเฟกต์ดังกล่าว - เมื่อโฮเวอร์เหนือองค์ประกอบ: hover
รองรับเบราว์เซอร์
เช่น:ไม่สนับสนุน
ขอบ: 13.0 ยกเว้น URL()
ไฟร์ฟอกซ์: 35.0
โครเมียม: 18.0 -เว็บคิท-
ซาฟารี: 9.1, 6.0 -เว็บคิท-
โอเปร่า: 40.0, 15.0 -เว็บคิท-
ไอโอเอสซาฟารี: 9.3, 6.1 -เว็บคิท-
เบราว์เซอร์ Android: 53.0, 4.4 -เว็บคิท-
โครเมียม สำหรับ Android: 55.0, 47.0 -เว็บคิท-
| กรอง | |
|---|---|
| เบลอ() | ค่าจะถูกระบุเป็นหน่วยความยาว เช่น px, em ใช้การเบลอแบบเกาส์เซียนกับภาพต้นฉบับ ยิ่งค่ารัศมีมาก ความเบลอก็จะยิ่งมากขึ้น หากไม่มีการระบุค่ารัศมี ค่าเริ่มต้นคือ 0 ไวยากรณ์ ตัวกรอง: เบลอ (3px); |
| ความสว่าง() | ค่าระบุเป็น % หรือเป็น ทศนิยม- เปลี่ยนความสว่างของภาพ ยิ่งค่าสูงเท่าไร ภาพที่สว่างยิ่งขึ้น- ค่าเริ่มต้นคือ 1 ไวยากรณ์ ตัวกรอง: ความสว่าง (50%); ตัวกรอง: ความสว่าง (.5); |
| ตัดกัน() | ค่าถูกระบุเป็น % หรือเศษส่วนทศนิยม ปรับความคมชัดของภาพ เช่น ความแตกต่างระหว่างบริเวณที่มืดที่สุดและสว่างที่สุดของภาพ/พื้นหลัง ค่าเริ่มต้นคือ 100% ค่าว่างจะถูกซ่อน ภาพต้นฉบับใต้พื้นหลังสีเทาเข้ม ค่าที่เพิ่มขึ้นจาก 0 ถึง 100% หรือ 0 ถึง 1 จะค่อยๆ เปิดภาพต้นฉบับไปยังจอแสดงผลดั้งเดิม และค่าด้านบนจะเพิ่มความคมชัดระหว่างไฮไลท์และเงา ไวยากรณ์ ตัวกรอง: คอนทราสต์ (20%); ตัวกรอง: ความคมชัด(.2); |
| เงา() | ตัวกรองทำหน้าที่คล้ายกับคุณสมบัติกล่องเงาและเงาข้อความ การใช้งาน ค่าต่อไปนี้: ชดเชยแกน X ชดเชยแกน Y เบลอ ยืด สีเงา คุณสมบัติที่โดดเด่นตัวกรองคือการเพิ่มเงาให้กับองค์ประกอบและเนื้อหาโดยคำนึงถึงความโปร่งใสเช่น หากองค์ประกอบมีข้อความอยู่ข้างใน ตัวกรองจะเพิ่มเงาให้กับทั้งข้อความและ ขอบเขตที่มองเห็นได้ปิดกั้น. ต่างจากตัวกรองอื่น ๆ สำหรับตัวกรองนี้จำเป็นต้องตั้งค่าพารามิเตอร์ (ค่าต่ำสุดคือค่าออฟเซ็ต) ไวยากรณ์ ตัวกรอง: เงาหล่น (2px 3px 5px สีดำ); |
| ระดับสีเทา() | แยกสีทั้งหมดออกจากรูปภาพ ทำให้เกิดผลลัพธ์ ภาพขาวดำ- ค่าถูกระบุเป็น % หรือเศษส่วนทศนิยม ยิ่งค่าสูง เอฟเฟกต์ก็จะยิ่งแข็งแกร่งขึ้น ไวยากรณ์ ตัวกรอง: ระดับสีเทา (.5); ฟิลเตอร์: ระดับสีเทา (50%); |
| สีหมุน() | เปลี่ยนสีของภาพขึ้นอยู่กับ มุมที่กำหนดการหมุนในวงล้อสี ค่าถูกระบุเป็นองศาตั้งแต่ 0deg ถึง 360deg 0deg เป็นค่าเริ่มต้น ซึ่งหมายความว่าไม่มีผลกระทบ ไวยากรณ์ ตัวกรอง: หมุนสี (180deg); |
| กลับด้าน() | ฟิลเตอร์ทำให้ภาพเป็นลบ ค่าระบุเป็น % 0% ไม่ใช้ฟิลเตอร์ 100% จะแปลงสีโดยสมบูรณ์ ไวยากรณ์ ตัวกรอง: กลับด้าน (100%); |
| ความทึบ() | ตัวกรองทำงานคล้ายกับ คุณสมบัติความทึบเพิ่มความโปร่งใสให้กับองค์ประกอบ คุณสมบัติที่โดดเด่นคือเบราว์เซอร์มีให้ การเร่งความเร็วด้วยฮาร์ดแวร์สำหรับไส้กรองที่ช่วยเพิ่มประสิทธิภาพ โบนัสพิเศษ- ตัวกรองสามารถใช้ร่วมกับตัวกรองอื่น ๆ พร้อมกันได้ เอฟเฟกต์ที่น่าสนใจ- ค่านี้ตั้งเป็น % เท่านั้น 0% จะทำให้องค์ประกอบโปร่งใสโดยสมบูรณ์ และ 100% ไม่มีผลกระทบ ไวยากรณ์ ตัวกรอง: ความทึบ (30%); |
| อิ่มตัว() | ควบคุมความอิ่มตัวของสี โดยทำงานบนหลักการของฟิลเตอร์คอนทราสต์ ค่า 0% จะลบสีออก ในขณะที่ 100% ไม่มีผลกระทบ ค่าตั้งแต่ 0% ถึง 100% จะลดความอิ่มตัวของสี ค่าที่สูงกว่า 100% จะเพิ่มความอิ่มตัวของสี ค่าสามารถระบุเป็น % หรือเป็นจำนวนเต็ม โดย 1 เทียบเท่ากับ 100% ไวยากรณ์ ตัวกรอง: อิ่มตัว (300%); |
| ซีเปีย() | เอฟเฟกต์ที่เลียนแบบสมัยโบราณและ "ย้อนยุค" ค่า 0% จะไม่เปลี่ยนแปลง รูปร่างองค์ประกอบและสร้างเอฟเฟ็กต์ซีเปียได้เต็ม 100% ไวยากรณ์ ฟิลเตอร์: ซีเปีย (150%); |
| URL() | ฟังก์ชันยอมรับตำแหน่งของไฟล์ XML ภายนอกที่มีตัวกรอง svg หรือจุดยึดของตัวกรองที่อยู่ในเอกสารปัจจุบัน ไวยากรณ์ ตัวกรอง: url(#filterId); /* ถ้าตัวกรองอยู่ในเอกสารนี้ */ ตัวกรอง: url(filter.svg#filterId); /* หากตัวกรองที่มี id="filterId" อยู่ในไฟล์ filter.svg*/ |
| ไม่มี | ค่าเริ่มต้น แสดงว่าไม่มีผล |
| อักษรย่อ | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| สืบทอด | สืบทอดค่าคุณสมบัติจากองค์ประกอบหลัก |
สวัสดีเพื่อน ๆ วันนี้ฉันมีบทเรียนสำคัญสำหรับคุณทั้ง 27 นาที แต่ในนั้นเราจะดูที่คุณสมบัติที่น่าสนใจมาก ๆ ที่จะให้คุณตั้งค่าเอฟเฟกต์พิเศษต่าง ๆ สำหรับรูปภาพโดยไม่ต้องเข้าไป โปรแกรมโฟโต้ชอปและบรรณาธิการอื่นๆ
กรองเป็นคุณสมบัติใน CSS3 ที่สามารถแก้ไขรูปภาพของคุณได้ ใช้การเบลอ เพิ่มคอนทราสต์และความสว่าง เพิ่มเงา เปลี่ยนสี และอื่นๆ อีกมากมาย
โดยรวมแล้วตัวกรองมี 10 ค่าที่ให้คุณทำ "สิ่งที่น่าสนใจทุกประเภท" ด้วยองค์ประกอบของไซต์ ตอนนี้ฉันเสนอให้วิเคราะห์ความหมายทั้ง 10 ประการในทางปฏิบัติในวิดีโอสอนด้านล่าง
ตัวกรองวิดีโอ CSS 3 – ตัวกรองรูปภาพ:
ตัวอย่างของเพจที่เราสร้างในบทช่วยสอนนี้:
คุณสามารถดาวน์โหลดไฟล์เทมเพลตโดยใช้ไฟล์ .
ความสนใจ! ขณะนี้คุณสมบัติตัวกรองอยู่ในการทดสอบและได้รับการสนับสนุนเท่านั้น เบราว์เซอร์ไฟร์ฟอกซ์อย่างเต็มที่ ก เบราว์เซอร์ Chromeและอื่น ๆ ที่ใช้กลไก Webkit คุณสมบัตินี้จะใช้งานได้เมื่อเพิ่มคำนำหน้าเท่านั้น ฉันแสดงคำนำหน้าในตอนท้ายของบทเรียน ดังนั้นฉันขอแนะนำให้อ่านก่อน ไฟร์ฟอกซ์ ใหม่ล่าสุดรุ่นต่างๆ
หากคุณขี้เกียจเกินไปที่จะดูวิดีโอคุณสามารถรับชมได้ คำแนะนำโดยละเอียดด้านล่างพร้อมกฎตัวกรองทั้งหมด
10 เอฟเฟกต์ฟิลเตอร์ใน CSS3
โปรดทราบว่าเอฟเฟ็กต์ทั้งหมดในรูปภาพด้านล่างนี้ใช้งานโดยใช้ CSS3 เท่านั้น ดังนั้นจะไม่ปรากฏในเบราว์เซอร์รุ่นเก่า!!!
1. ฟิลเตอร์เบลอ
ถ้าเราคุยกัน ในภาษาง่ายๆนี่คืออาการเบลอของภาพตามปกติ ฟิลเตอร์เป็นสิ่งที่ดีถ้าคุณต้องการทำให้ขอบดูอ่อนลง การเบลอจะทำให้พื้นหลังไม่อยู่ในโฟกัส
ลองใช้ตัวกรองของเรากับสุนัขจิ้งจอกโดยเขียนโค้ดต่อไปนี้:
ฉันใส่ทางด้านซ้ายเพื่อความชัดเจน ภาพปกติแต่ด้านขวาเป็นรูปภาพเดียวกัน แก้ไขโดยใช้ CSS3 เท่านั้น
ตัวกรองที่มีค่าเบลอระบุเป็นพิกเซล ยิ่งไปกว่านั้น ยิ่งค่านี้สูงเท่าไร ภาพก็จะยิ่งเบลอมากขึ้นเท่านั้น
กรองความสว่าง
ฟิลเตอร์นี้คล้ายกับการเปลี่ยนความสว่างของหน้าจอทีวี ใน ในกรณีนี้ปรับสีได้ระหว่างสีดำและ สีเดิมเมื่อมีการเพิ่มพารามิเตอร์
และนี่คือม้าทดลองของเรา:
คุณสามารถปรับได้ตั้งแต่ 0% ขึ้นไป ที่ 0% ภาพจะเป็นสีดำ ที่ 100% จะเป็นต้นฉบับ และที่ 200% จะสว่างเป็นสองเท่า นี้เป็นอย่างมาก ผลดีโดยเฉพาะภาพที่มืด
ตัวกรองความสว่างสามารถระบุได้ 3 วิธี:
- จำนวนทั้งหมด
- ตัวเลขเศษส่วน
- ความสนใจ
นอกจากนี้โดยหลักการแล้วไม่มีข้อจำกัดใดๆ ในตัวอย่างนี้ เราตั้งค่าเป็น 2 และเพิ่มความสว่างของภาพขึ้น 2 เท่าหรือ 200%
3. ฟิลเตอร์คอนทราสต์
ฟิลเตอร์นี้จะช่วยให้คุณสามารถเพิ่มคอนทราสต์ของภาพโดยการปรับความแตกต่างระหว่างโทนสีสว่างและสีเข้มของภาพ ที่นี่ระบุค่าด้วยสามวิธี: จำนวนเต็ม เศษส่วน และเปอร์เซ็นต์ ดังนั้น 100% จึงเป็นค่าเริ่มต้น 0% - ภาพสีดำ- และอะไรก็ตามที่มากกว่า 100% จะเพิ่มความแตกต่างให้กับคุณ
คราวนี้เราจะล้อเลียนแมว มาเพิ่มคอนทราสต์ +50% กัน:
นี่คือผลลัพธ์:
อย่างที่คุณเห็น ตอนนี้เราไม่จำเป็นต้องใช้ Photoshop เพื่อสร้างคอนทราสต์และเบลออีกต่อไป ที่นี่ ใน CSS เราถ่ายและเปลี่ยนรูปภาพตามที่ใจเราต้องการ
4. กรองความอิ่มตัว - อิ่มตัว
นี่เป็นเอฟเฟกต์สุดเจ๋งที่จะทำให้ภาพของคุณมีชีวิตชีวาและสมบูรณ์ยิ่งขึ้น เราระบุค่าในสามตัวเลือก: จำนวนเต็มและเศษส่วนตลอดจนเปอร์เซ็นต์ ระบุค่า - 200% มาเพิ่มความอิ่มตัวของภาพเรา 2 เท่า
ทะเลน่าอยู่มากขึ้นอย่างเห็นได้ชัด:
ดูสิว่าภาพจะออกมาฉ่ำขนาดไหน ฉันคิดว่ามันเป็นเอฟเฟกต์ที่เจ๋งมาก! เราไปกันเลยมั้ย??
5. กรองความโปร่งใส - ความทึบ
ตั้งค่าความโปร่งใส มีข้อ จำกัด บางประการกับค่าของตัวกรองนี้:
- เปอร์เซ็นต์: จาก 0% ถึง 100
ลองลดความโปร่งใสของรูปภาพต่อไปนี้ลง 50%
ดูสิ่งที่เกิดขึ้น:
6. กรองผกผัน - กลับด้าน
ช่วยให้คุณสามารถ "พลิก" สีได้ นอกจากนี้ยังมีข้อจำกัดเกี่ยวกับค่าของตัวกรองนี้:
- จำนวนเต็มและเศษส่วน: ตั้งแต่ 0 ถึง 1
- เปอร์เซ็นต์: จาก 0% ถึง 100
ในกรณีของเรา มาตั้งค่ากัน ค่าสูงสุด - 100 %:
และด้วยการขยับมือเล็กน้อย รถสปอร์ตที่สวยงามก็กลายเป็น...
ฟิลเตอร์นี้ช่วยให้เราสร้างผลกระทบเชิงลบต่อตัวภาพได้
7. ฟิลเตอร์ซีเปีย
จะทำให้คุณสามารถเปลี่ยนสีได้โดยการเพิ่มโทนสีซีเปีย นั่นคือคุณจะได้รับการเลียนแบบ รูปถ่ายเก่า- ข้อจำกัดเกี่ยวกับค่าตัวกรองจะเหมือนกับในสองข้อก่อนหน้า
- จำนวนเต็มและเศษส่วน: ตั้งแต่ 0 ถึง 1
- เปอร์เซ็นต์: จาก 0% ถึง 100
ดี? เราจะลองไหม?
ไอ้เหี้ย! แค่โบกมือเล็กน้อย เราก็จะทำให้รูปภาพนี้มีอายุขึ้นอีกสองสามทศวรรษ ดูเหมือนว่าฉันจะคลั่งไคล้ตัวอย่างเหล่านี้มาก
ในกรณีของเรา เราระบุค่าเศษส่วน - 0.5 แต่คุณสามารถทดลองได้ตามที่คุณต้องการ!
8. ฟิลเตอร์ระดับสีเทา
ฟิลเตอร์นี้ช่วยให้เราเปลี่ยนสีเป็นเฉดสีเทาได้ นอกจากนี้ยังมีข้อจำกัดเกี่ยวกับค่าตัวกรองด้วย:
- จำนวนเต็มและเศษส่วน: ตั้งแต่ 0 ถึง 1
- เปอร์เซ็นต์: จาก 0% ถึง 100
ดังนั้นที่ 100% ภาพทั้งหมดจะเป็นระดับสีเทา และที่ 0% จะไม่มีการเปลี่ยนแปลง 0 เท่ากับ 0% และ 1.0 เท่ากับ 100%
มาตั้งค่าเป็น 0.7 (หรือ 70%):
คำตอบนี้ใช้สำหรับเค้าโครงแผนที่แนวนอน การออกแบบวัสดุด้วยความสูงและรูปภาพแบบไดนามิก
เพื่อป้องกันการบิดเบือนของภาพเนื่องจากความสูงของแผนที่แบบไดนามิก คุณสามารถใช้ภาพพื้นหลังตัวยึดตำแหน่งที่เบลอเพื่อปรับการเปลี่ยนแปลงความสูงได้
คำอธิบาย
- แผนที่อยู่ใน กับ เปลือกคลาสซึ่งก็คือเฟล็กบ็อกซ์
- แผนที่ประกอบด้วยสององค์ประกอบ รูปภาพที่เป็นลิงก์และเนื้อหา
- ลิงค์ , ลิงค์ชั้นเรียนตำแหน่ง ค่อนข้าง .
- ลิงก์ประกอบด้วยองค์ประกอบย่อยสององค์ประกอบ นั่นคือมาร์กอัปมาร์กอัป
และระดับ รูป,ซึ่งเป็นภาพที่ชัดเจน
- ทั้งสองมีตำแหน่งเป็น แน่นอนและมี width: 100% แต่เป็นคลาส รูปมีลำดับสแต็กที่สูงกว่า เช่น ดัชนี z: 2 ซึ่งวางไว้เหนือตัวยึดตำแหน่ง
- ภาพพื้นหลังสำหรับตัวยึดตำแหน่งที่เบลอได้รับการตั้งค่าโดยใช้ สไตล์อินไลน์ในรูปแบบ HTML
รหัส
Wrapper (จอแสดงผล: ดิ้น; ความกว้าง: 100%; เส้นขอบ: 1px solid rgba (0, 0, 0, 0.16); box-shadow: 0 1px 1px rgba (0, 0, 0, 0.16), 0 1px 1px rgba (0 , 0, 0, 0.23); สีพื้นหลัง: #fff; ระยะขอบ: 1rem อัตโนมัติ; .wrapper:hover ( กล่องเงา: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); .link ( จอแสดงผล: บล็อก; ความกว้าง: 200px; ความสูง: อัตโนมัติ; ล้น: ซ่อน; ตำแหน่ง: ญาติ; เส้นขอบขวา: 2px solid #ddd; ) .blur ( ตำแหน่ง: สัมบูรณ์; ซ้าย: 0 ; ระยะขอบ: อัตโนมัติ ความสูง: 100%; -moz-filter: เบลอ (5px); -o-filter: เบลอ (5px); -ms-filter: เบลอ (5px); 20px); ความกว้างสูงสุด: 100% ; ความสูง: อัตโนมัติ; ตำแหน่ง: สูงสุด: 0; ด้านล่าง: 0; .pic: โฮเวอร์: ทั้งหมด 0.2 วินาที; การตกแต่งข้อความ: ไม่มี; .content (จอแสดงผล: ดิ้น; ทิศทางดิ้น: คอลัมน์; ความกว้าง: 100%; ความกว้างสูงสุด: 100%; ช่องว่างภายใน: 20px; ล้น-x: ซ่อนเร้น; ) .ข้อความ ( ระยะขอบ: 0; )
วาระการประชุม dicendo memores du gi ad Perciperem โอกาส ei ac im ac designabam. อิสตา รอม ซีบี วุล อาปุด ตม. Notaverim เพื่อขยาย expendere concilium ab นามแฝง cogor tales fas modus parum sap nullo. สมัครใจ ingressus infirmari ex mentemque ac manifeste eo Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt.
2018-12-04T00:00Z
ใน tab.content ใน CSS ให้เปลี่ยนเป็น position:absolute มิฉะนั้น หน้าที่แสดงจะไม่เลื่อน
2018-12-11T00:00Z
กรุณาตรวจสอบรหัสด้านล่าง:
BackgroundImageCVR( ตำแหน่ง:ญาติ; การขยาย:15px; ) .พื้นหลังภาพ( ตำแหน่ง:สัมบูรณ์; ซ้าย:0; ขวา:0; บน:0; ด้านล่าง:0; พื้นหลัง:url("http://www.planwallpaper.com /static/images/colorful-triangles-wallpaper_yB0qTG6.jpg"); ขนาดพื้นหลัง: ปก; z-index: 1; -webkit-filter: เบลอ (10px); -moz-filter: เบลอ (10px); -o- ตัวกรอง: เบลอ (10px); -ms-filter: เบลอ (10px); ตัวกรอง: เบลอ (10px);
2018-12-18T00:00Z
ตามที่ระบุไว้ในคำตอบอื่น ๆ สามารถทำได้ด้วย:
- สำเนา ภาพเบลอเป็นพื้นหลัง
- องค์ประกอบหลอกซึ่งสามารถกรองได้ จะถูกวางตำแหน่งไว้ด้านหลังเนื้อหา
คุณยังสามารถใช้ตัวกรองฉากหลังได้
มีคุณสมบัติที่รองรับที่เรียกว่าตัวกรองฉากหลังซึ่งปัจจุบันรองรับใน Edge, Safari และ iOS Safari (ดูสถิติที่ caniuse.com)
คุณสมบัติตัวกรองฉากหลังให้เอฟเฟกต์ต่างๆ เช่น การเบลอหรือการเปลี่ยนสีบริเวณด้านหลังองค์ประกอบ ซึ่งสามารถมองเห็นได้ผ่านองค์ประกอบนั้นโดยการปรับความโปร่งใส/ความทึบขององค์ประกอบ
คุณจะใช้มันแบบนี้:
Box ( -webkit-backdrop-filter: blur(5px); // ใช้สำหรับ Safari 9+, Edge 17+ (ไม่ใช่ข้อผิดพลาด) และ iOS Safari 9.2+ ตัวกรองฉากหลัง: blur(5px); // ไม่มีใครรองรับ non คำนำหน้ายัง)
2018-12-25T00:00Z
คุณจะต้องใช้ภาชนะสองใบที่แตกต่างกัน: อันหนึ่งสำหรับ ภาพพื้นหลังและอีกรายการหนึ่งสำหรับเนื้อหาของคุณ
ในตัวอย่าง ฉันสร้างคอนเทนเนอร์สองรายการ: .พื้นหลังภาพ และ .เนื้อหา
ทั้งคู่วางอยู่ในตำแหน่ง: คงที่และซ้าย: 0; ขวา: 0; ซ้าย: 0; ขวา: 0; ความแตกต่างในการแสดงผลมาจากค่าดัชนี z ที่ตั้งไว้แตกต่างกันสำหรับองค์ประกอบ
Lorem ipsum dolor นั่ง amet, consectetur adipiscing elit. Duis aliquam erat ใน ante malesuada, facilisis semper nulla semper Phasellus sapien neque, faucibus ใน malesuada quis, lacinia และ libero Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis Massa, sollicitudin นั่ง amet molestie a, posuere นั่ง amet nisl. มอริส ไม่แน่ใจนัก Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar ผู้จัดซื้อคอมโมโด Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam และ nisl eu felis vulputate porta
รวมเข้าด้วยกัน Aliquam consequat ใน ague sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan และ nunc หยาบคาย accumsan ห้องโถงชั่วคราว, ยุคใน Mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci Vivamus condimentum dictum ชั่วคราว น้ำที่ est ante Sed lobortis และ lorem ใน sagittis อยู่ในความสงสัยในยานพาหนะและยานพาหนะ