Mari kita bicara tentang dasar-dasarnya tanpa terlalu bertele-tele. Terkadang front-end perlu memburamkan latar belakang tetapi memerlukan konten yang jelas terlebih dahulu:
Berikut implementasi spesifiknya:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Latar belakang buram</title></head><body> <div class=main><!-- Berikut ini Latar belakangnya buram dan konten lainnya jelas--><!-- Lapisan konten--> <div class=banner> <div class=banner-contain> <h1>Sayalah kontennya</h1> </div> <! -- Lapisan latar belakang --> <div class=banner-bg></div> </div> </div> <style> .main{ lebar: 100%; } .banner{ lebar: 100%; .banner-bg{ lebar: 100%;/*Lebar memenuhi layar*/ padding-top: 52.734%;/*Tinggi gambar dibagi dengan lebar untuk mendapatkan nilai ini*/ latar belakang: url(test.jpg)center center no-repeat;/*Kedua pusat tersebut masing-masing sejajar secara horizontal dan vertikal*/ ukuran latar belakang: 100%;/*Latar belakang tersebar secara horizontal*/ filter:blur(10px); Nilai blur, semakin besar, semakin blur*/ } .banner-contain{ position: absolute;/*Set posisi absolut lapisan konten*/ width: 100%; text-align: center; : 6;/*Membawa konten ke atas*/ margin-top: 6%; 1. Implementasi adaptif:Atur padding-top tag div menjadi persentase. Nilai persentase padding dan margin dihitung berdasarkan lebar, bukan tinggi layar, sehingga Anda dapat mengatur area adaptif yang sesuai, misalnya berikut
Maka perbandingan tinggi dan lebarnya adalah: 540/1024 yaitu sekitar 52,734%, artinya tinggi adalah 52,734% dari lebar. Disini lebarnya diatur menjadi 100%, maka padding-top dari lebarnya adalah 52,734%*100%
Siapkan dua lapisan, satu adalah lapisan blur latar belakang, secara adaptif mendukung seluruh wadah div luar, atur nilai blur melalui filter:blur() , yang lainnya adalah lapisan konten, pemosisian absolut, atur indeks-z untuk meningkatkan lapisan konten Lapisan dicegah agar tidak diblokir sehingga lapisan konten tidak terpengaruh oleh keburaman
Di atas adalah contoh kode yang diperkenalkan editor kepada Anda di bagian depan untuk mencapai keburaman latar belakang tetapi dengan konten yang jelas dan adaptif. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!
Jika menurut Anda artikel ini bermanfaat, silakan cetak ulang, harap sebutkan sumbernya, terima kasih!