Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Mencipta Semula Kesan Tindanan Kabur iOS 7 dengan CSS?

Bagaimanakah Saya Boleh Mencipta Semula Kesan Tindanan Kabur iOS 7 dengan CSS?

Linda Hamilton
Lepaskan: 2024-11-02 18:34:02
asal
925 orang telah melayarinya

How Can I Recreating iOS 7's Blurred Overlay Effect with CSS?

Kesan Tindanan Kabur iOS 7 Dicipta Semula dengan CSS

Kesan tindanan Apple dalam iOS 7 bukan sekadar soal ketelusan, tetapi melibatkan perkara yang halus kabur yang menambah kedalaman dan minat. Artikel ini meneroka cara untuk meniru kesan ini menggunakan CSS, mendedahkan rahsia di sebalik tindanan kabur.

Penapis Kabur CSS

Kunci untuk mencapai kesan kabur ini terletak pada Penapis CSS blur(), yang tersedia dalam penyemak imbas moden seperti Chrome, Firefox, Safari dan IE10 . Sintaks untuk menggunakan penapis blur() adalah mudah:

<code class="css">filter: blur(value);</code>
Salin selepas log masuk

dengan nilai mewakili jejari kabur yang dikehendaki dalam piksel. Untuk kabur halus yang serupa dengan tindanan Apple, nilai sekitar 20 piksel disyorkan.

Contoh Pelaksanaan

Untuk menggunakan kesan kabur pada elemen pada halaman anda, cuma tambahkan peraturan CSS berikut:

<code class="css">#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}</code>
Salin selepas log masuk

Perhatikan bahawa anda mungkin perlu memasukkan awalan vendor untuk keserasian dengan penyemak imbas lama. Selain itu, jangan lupa untuk menentukan nilai kelegapan untuk memastikan tindanan kabur tidak sepenuhnya mengaburkan kandungan asas.

Contoh dalam JavaScript

Jika anda lebih suka gunakan kesan kabur secara dinamik menggunakan JavaScript, anda boleh menggunakan kod berikut:

<code class="javascript">var element = document.getElementById('myDiv');
element.style.filter = 'blur(20px)';
element.style.opacity = 0.4;</code>
Salin selepas log masuk

Dengan menggunakan penapis blur() dan secara pilihan menggabungkannya dengan JavaScript, anda boleh mencipta semula kesan tindanan kabur yang digunakan dalam iOS 7 dengan mudah. , mempertingkatkan estetika visual aplikasi web anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Semula Kesan Tindanan Kabur iOS 7 dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan