Cara menggunakan kesan penapis CSS pada imej latar belakang
P粉022285768
2023-08-20 13:28:36
<p>Saya mempunyai fail JPEG yang saya gunakan sebagai imej latar belakang untuk halaman carian saya dan saya menyediakannya menggunakan CSS kerana saya bekerja dalam konteks Backbone.js: </p>
<pre class="brush:php;toolbar:false;">background-image: url("whatever.jpg");</pre>
<p>Saya mahu menggunakan penapis kabur CSS 3 pada latar belakang sahaja, tetapi saya tidak pasti cara menggayakan elemen itu sahaja. Jika saya mencuba: </p>
<pre class="brush:php;toolbar:false;">-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-penapis: blur(5px);
-ms-filter: blur(5px);
penapis: kabur(5px);</pre>
<p>Letakkan kod di atas dalam CSS saya di bawah <code>background-image</code> dan ia akan menggayakan keseluruhan halaman, bukan hanya latar belakang. Adakah terdapat cara untuk memilih hanya imej dan menggunakan penapis pada imej itu? Sebagai alternatif, adakah terdapat cara untuk mematikan sahaja kesan kabur untuk elemen lain pada halaman? </p>
pen
Pemansuhan keperluan untuk elemen tambahan, membolehkan kandungan dimuatkan ke dalam aliran dokumen tanpa diperbaiki/mutlak seperti penyelesaian lain.
Gunakan kaedah berikut untuk mencapai
Edit Jika anda ingin membuang sempadan putih di tepi, gunakan kiri dan atas
110%
的宽度和高度以及-5%
. Ini akan membesarkan sedikit imej latar belakang anda, tetapi tidak akan ada sebarang warna pepejal berdarah melalui tepi. Terima kasih kepada Chad Fawcett atas cadangan itu.Lihat Buku nota ini.
Anda perlu menggunakan dua bekas berbeza, satu untuk imej latar belakang dan satu lagi untuk kandungan.
Dalam contoh, saya mencipta dua bekas,
.background-image
和.content
.Mereka semua menggunakan nilai
position: fixed
和left: 0; right: 0;
进行定位。它们显示的差异来自于为元素设置的不同z-index
.