วันนี้ฉันได้รับคำขอให้ใช้เอฟเฟกต์ Gaussian blur เพื่อเบลอหน้า ฉันเพิ่งใช้โอกาสนี้ในการจัดเรียง API สองตัวของ Gaussian blur ใน CSS3
แสดงให้เห็น:
API นี้เป็นตัวกรองที่ไม่เพียงแต่ทำให้ได้ภาพเบลอแบบเกาส์เซียนเท่านั้น แต่ยังรวมถึงสิ่งอื่นๆ อีกมากมาย เช่น การชดเชยสี ความอิ่มตัวของสี ระดับสีเทา เป็นต้น
ไวยากรณ์:
// ใช้ช่องว่างเพื่อแยกตัวกรองหลายตัว filter: none; //ตัวกรองเบลอแบบเกาส์: เบลอ(4px); // ตัวกรองความสว่างเชิงเส้น: ความสว่าง (); // ตัวกรองความคมชัด: ความคมชัด(); // ตัวกรองเอฟเฟกต์เงา: drop-shadow(); //ตัวกรองระดับสีเทา: ระดับสีเทา(); // ตัวกรองการหมุนสี: hue-rotate(); //กลับตัวกรองภาพ: กลับด้าน(); //แปลงตัวกรองความโปร่งใส: ความทึบ(); // ตัวกรองความอิ่มตัว: saturate(); // ฟิลเตอร์สีน้ำตาล: ซีเปีย(); // ตัวกรองตัวกรอง SVG: url();
ในหมู่พวกเขา filter: blur();
แสดงให้เห็น:
เมื่อคุณสร้างองค์ประกอบและเพิ่มแอตทริบิวต์นี้ องค์ประกอบจะเพิ่มเอฟเฟกต์ (เช่น การเบลอหรือการเปลี่ยนสี) ให้กับพื้นที่ด้านหลังองค์ประกอบ
ตัดกัน:
ต้องโหลดแอตทริบิวต์ตัวกรองบนรูปภาพหรือรูปภาพพื้นหลัง ในขณะที่ตัวกรองพื้นหลังจะต้องเป็นองค์ประกอบเท่านั้น
ไวยากรณ์:
ตัวกรองฉากหลัง: เบลอ (2px); ตัวกรองฉากหลัง: ความสว่าง (60%); ฟิลเตอร์ฉากหลัง: คอนทราสต์ (40%); ตัวกรองฉากหลัง: drop-shadow (4px 4px 10px blue); ตัวกรองฉากหลัง: ระดับสีเทา (30%); ตัวกรองฉากหลัง: หมุนสี (120deg); ตัวกรองฉากหลัง: กลับด้าน (70%); ตัวกรองฉากหลัง: ความทึบ (20%); ฟิลเตอร์ฉากหลัง: ซีเปีย (90%); ตัวกรองฉากหลัง: อิ่มตัว (80%);
<!DOCTYPE html>
<html lang="th">
<หัว>
<สไตล์>
.wrapBox2 {
ความกว้าง: 800px;
ความสูง: 300px;
ล้น: ซ่อนเร้น;
ตำแหน่ง: ญาติ;
ภาพพื้นหลัง: url("./win.jpeg");
ขนาดพื้นหลัง: 100% 100%;
พื้นหลังซ้ำ: ไม่ซ้ำ;
ตัวกรอง: เบลอ (10px);
-
.กล่องย่อย {
ตำแหน่ง: แน่นอน;
ความกว้าง: คำนวณ (100% - 100px);
ความสูง: คำนวณ (100% - 100px);
ดัชนี z: 2;
-
.ข้อความ {
ตำแหน่ง: ญาติ;
/* ดัชนี z: 10; */
ขนาดตัวอักษร: 40px;
น้ำหนักตัวอักษร: ตัวหนา;
สี: #f00;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div class="wrapBox2">
<div class="subBox"></div>
<div class="text">เบลอทั้งหมด</div>
</div>
</ร่างกาย>
</html> 
สิ่งหนึ่งที่ควรทราบคือหลังจากเพิ่มความเบลอ ขนาดจริงจะเกินความกว้างและความสูงที่เรากำหนดไว้ เนื่องจากเอฟเฟกต์เสี้ยนที่อยู่รอบๆ คุณสามารถพันเลเยอร์ไว้ด้านนอกและตั้งค่า overflow: hidden;
<!DOCTYPE html>
<html lang="th">
<หัว>
<สไตล์>
.wrapBox2 {
ความกว้าง: 800px;
ความสูง: 300px;
/* ล้น: ซ่อนอยู่; */
ตำแหน่ง: ญาติ;
-
.กล่องย่อย {
ความกว้าง: 100%;
ความสูง: 100%;
ตำแหน่ง: แน่นอน;
ความกว้าง: คำนวณ (100% - 100px);
ความสูง: คำนวณ (100% - 100px);
ดัชนี z: 2;
ตัวกรอง: เบลอ (10px);
-
.ข้อความ {
ตำแหน่ง: ญาติ;
/* ดัชนี z: 10; */
ขนาดตัวอักษร: 40px;
น้ำหนักตัวอักษร: ตัวหนา;
สี: #f00;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div class="wrapBox2">
<img src="./win.jpeg" class="subBox" />
<div class="text">เบลอทั้งหมด</div>
</div>
</ร่างกาย>
</html> 
ด้วยวิธีนี้ เนื่องจากข้อความและรูปภาพอยู่ในระดับเดียวกัน ข้อความจึงอยู่ใต้รูปภาพหรือเหนือรูปภาพ (ควบคุมตามดัชนี z) โดยไม่ทำให้ข้อความเบลอ
<!DOCTYPE html>
<html lang="th">
<หัว>
<สไตล์>
.wrapBox2 {
ความกว้าง: 800px;
ความสูง: 300px;
ล้น: ซ่อนเร้น;
ตำแหน่ง: ญาติ;
ภาพพื้นหลัง: url("./win.jpeg");
ขนาดพื้นหลัง: 100% 100%;
พื้นหลังซ้ำ: ไม่ซ้ำ;
-
.กล่องย่อย {
ตำแหน่ง: แน่นอน;
ความกว้าง: คำนวณ (100% - 100px);
ความสูง: คำนวณ (100% - 100px);
ดัชนี z: 2;
ตัวกรองฉากหลัง: เบลอ (10px);
/* ด้านบน: 100px;
-
.ข้อความ {
ตำแหน่ง: ญาติ;
/* ดัชนี z: 10; */
ขนาดตัวอักษร: 40px;
น้ำหนักตัวอักษร: ตัวหนา;
สี: #f00;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div class="wrapBox2">
<div class="subBox"></div>
<div class="text">เบลอบางส่วน</div>
</div>
</ร่างกาย>
</html> 
อย่างที่คุณเห็น ไม่จำเป็นต้องตั้งค่าแอตทริบิวต์ตัวกรองพื้นหลังในองค์ประกอบรูปภาพ แต่ในองค์ประกอบใดๆ ฉันคิดว่าวิธีนี้มีความยืดหยุ่นมากกว่า
แน่นอนว่าการใช้ตัวกรองฉากหลังสามารถตอบสนองสถานการณ์แรกได้เช่นกัน
นี่เป็นการสรุปบทความเกี่ยวกับ CSS โดยใช้ตัวกรองและตัวกรองพื้นหลังเพื่อให้ได้เอฟเฟกต์เบลอแบบเกาส์ (โค้ดตัวอย่าง) สำหรับเนื้อหา CSS Gaussian blur ที่เกี่ยวข้องเพิ่มเติม โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรือเรียกดูบทความที่เกี่ยวข้องด้านล่างต่อไป คุณจะสนับสนุน downcodes.com มากขึ้นในอนาคต!