Bagaimana untuk mengaburkan Imej Latar Belakang Elemen dalam CSS Sambil Mengekalkan Kandungan Tajam?

Kaburkan Imej Latar Belakang dalam CSS Tanpa Menjejaskan Kandungan

Dalam CSS, anda mungkin menghadapi situasi di mana anda ingin mengaburkan imej latar belakang sesuatu elemen tanpa menjejaskan kandungan di dalamnya. Begini cara anda boleh mencapai ini:

Penyelesaian melibatkan mencipta unsur pseudo (:sebelum) yang mewarisi imej latar belakang elemen induk. Elemen pseudo ini kemudiannya diletakkan secara mutlak dan diberi penapis kabur. Dengan menetapkan indeks-znya kepada -1, ia muncul di belakang kandungan.

Untuk melaksanakan ini, gunakan CSS berikut:

<code class="css">.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}

.blur-bgimage:before {
    content: "";
    position: absolute;
    width : 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter        : blur(10px);
    -moz-filter   : blur(10px);
    -webkit-filter: blur(10px);
    -o-filter     : blur(10px);

    transition        : all 2s linear;
    -moz-transition   : all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition     : all 2s linear;
}</code>

Anda kemudiannya boleh menggunakan JavaScript untuk menogol kelas ( cth., 'blur-bgimage') yang menggunakan CSS ini pada elemen yang diingini, mengaburkan atau menyahkaburkan imej latar belakang mengikut keperluan.

Atas ialah kandungan terperinci Bagaimana untuk mengaburkan Imej Latar Belakang Elemen dalam CSS Sambil Mengekalkan Kandungan Tajam?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!