css怎么虚化背景图片？css虚化背景图片的方法介绍
在看到背景图片虚化的时候，我相信很多朋友都会想到去用ps去实现这个效果，那么用css能实现背景图片的虚化效果吗？接下来的这篇文章就来给大家介绍一下css设置背景图片虚化的方法。
在虚化背景时使用的是filter属性，我们就是利用filter属性中blur来设置虚化背景的。
代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
img {
filter: blur(5px);
}
</style>
</head>
<body>
<img src="image/girl.jpg" alt="girl" width="300" height="300">
</body>
</html>css虚化背景的效果如下：
上述这个方法只是简单的利用css将背景图片虚化，下面我们来看看稍微复杂一点的方法，当然也是利用filter属性
代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
.mbl {
width: 20em;
height: 20em;
background: url(image/girl.jpg);
background-size: cover;
overflow: hidden;
margin: 30px;
}
.text {
width: 18em;
height: 18em;
margin: 1em;
background: hsla(0, 0%, 100%, .4);
color: black;
text-align: center;
overflow: hidden;
position: relative;
}
.text::before {
position: absolute;
background: url(image/girl.jpg);
background-size: cover;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
filter: blur(4px);
/* background: rgba(225, 0, 0, 0.5);*/
}
.text p {
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle;
position: relative;
}
</style>
</head>
<body>
<div class="mbl">
<div class="text">
<p>图片上面的文字内容</p>
</div>
</div>
</body>
</html>背景图片虚化效果如下：
说明：上述代码主要就是将要设置虚化背景的地方通过伪元素设置背景颜色或图片，利用区域relative定位和伪元素absolute定位这样才能让伪元素的大小完全等于本来区域的大小，然后用blur滤镜进行虚化处理，就会想上面的效果那样。
本篇文章到这里就全部结束了，更多精彩的内容大家可以关注php中文网的相关教程栏目！！！
Atas ialah kandungan terperinci css怎么虚化背景图片？css虚化背景图片的方法介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1653
14
1413
52
1305
25
1251
29
1224
24
Bagaimana untuk menyesuaikan imej latar belakang dalam Win11
Jun 30, 2023 pm 08:45 PM
Bagaimana untuk menyesuaikan imej latar belakang dalam Win11? Dalam sistem win11 yang baru dikeluarkan, terdapat banyak fungsi tersuai, tetapi ramai rakan tidak tahu cara menggunakan fungsi ini. Sesetengah rakan berpendapat bahawa imej latar belakang agak monoton dan ingin menyesuaikan imej latar belakang, tetapi tidak tahu bagaimana untuk menyesuaikan imej latar belakang Jika anda tidak tahu bagaimana untuk menentukan imej latar belakang, editor telah menyusun langkah-langkah untuk sesuaikan imej latar belakang dalam Win11 di bawah Jika anda berminat Jika ya, lihat di bawah! Langkah-langkah untuk menyesuaikan imej latar belakang dalam Win11: 1. Klik butang menang pada desktop dan klik Tetapan dalam menu pop timbul, seperti yang ditunjukkan dalam rajah. 2. Masukkan menu tetapan dan klik Pemperibadian, seperti yang ditunjukkan dalam rajah. 3. Masukkan Pemperibadian dan klik pada Latar Belakang, seperti yang ditunjukkan dalam gambar. 4. Masukkan tetapan latar belakang dan klik untuk menyemak imbas gambar
Bagaimana untuk memadam imej latar belakang dalam tetapan pemperibadian win10
Dec 21, 2023 pm 02:31 PM
Setiap kali latar belakang desktop yang digunakan dalam sistem Win10 akan dipaparkan dalam imej latar belakang yang diperibadikan dalam tetapan, sesetengah pengguna ingin memadamkannya, tetapi tidak tahu bagaimana untuk melakukannya Artikel ini adalah mengenai cara memadam imej latar belakang yang diperibadikan Win10 dikongsi oleh laman web ini. Lihat imej latar belakang desktop terpakai: 1. Klik [klik kanan] pada ruang kosong pada desktop, dan pilih [Peribadikan] dalam item menu yang terbuka 2. Dalam imej pilihan di latar belakang, anda boleh melihat latar belakang desktop anda telah menggunakan Gambar; padam gambar latar belakang desktop yang digunakan: Nota: Operasi ini melibatkan pengubahsuaian pendaftaran adalah berisiko. Sila sandarkan data terlebih dahulu 1. Tekan kombinasi kekunci [Win+R]. untuk membuka tetingkap jalankan dan masukkan perintah [regedit] ], dan kemudian klik [OK];
Bagaimana untuk menggantikan imej latar belakang ppt secara seragam
Mar 25, 2024 pm 04:16 PM
Penggantian bersatu imej latar belakang PPT adalah operasi penting untuk meningkatkan gaya visual persembahan, dan boleh dicapai melalui dua kaedah utama: penggantian induk slaid dan penggantian kelompok. Penggantian induk slaid melibatkan pemadaman imej asal dan memasukkan imej baharu dalam induk, dengan itu digunakan pada semua slaid. Fungsi penggantian kelompok secara langsung menggantikan imej latar belakang semua slaid dalam pembentangan. Imej latar belakang yang disatukan bukan sahaja meningkatkan persembahan anda tetapi juga meningkatkan tumpuan khalayak anda. Adalah penting untuk memilih imej berkualiti tinggi yang sepadan dengan tema, dan memberi perhatian kepada melaraskan butiran seperti ketelusan dan saiz. Selain itu, PPT juga menyediakan pilihan tetapan latar belakang yang kaya, seperti kecerunan, tekstur dan corak, yang boleh disesuaikan mengikut keperluan.
Cara menambah imej latar belakang pada Douyin Live Companion - Cara menambah imej latar belakang pada Douyin Live Companion
Mar 05, 2024 am 09:16 AM
Ramai pengguna yang disiarkan secara langsung di Douyin akan menggunakan perisian Douyin Live Companion, tetapi adakah anda tahu cara menambah imej latar belakang pada Douyin Live Companion Berikut ialah kaedah menambah imej latar belakang pada Douyin Live Companion yang dibawakan oleh anda? editor. Jika anda berminat Pengguna datang dan lihat di bawah. Mula-mula log masuk ke Douyin Live Companion pada komputer anda, dan kemudian masukkan halaman utama. Di sebelah kiri, kami memilih [Tambah Bahan] di bawah [Adegan 1]. Seterusnya, akan ada tetingkap untuk menambah bahan pada halaman Kita boleh terus memilih fungsi [Gambar] dan klik untuk masuk. Kami kemudian akan membuka tetingkap di mana bahan imej disimpan secara setempat. Kita perlu memilih bahan gambar yang ingin kita tambah dan kemudian klik butang Buka di sudut kanan bawah untuk menambahnya. Selepas menambah gambar, kita perlu menggunakan butang kiri tetikus untuk menyeret gambar ke yang sesuai
Pengenalan kepada menetapkan imej latar belakang dalam WPS Office 2016
Mar 29, 2024 pm 10:21 PM
1. Mulakan demonstrasi WPS, seperti yang ditunjukkan dalam rajah. 2. Klik butang [+] untuk mencipta slaid baharu, seperti yang ditunjukkan dalam rajah. 3. Klik kanan dan pilih [Latar Belakang], seperti yang ditunjukkan dalam rajah. 4. Dalam pilihan isian pada halaman [Object Properties], pilih [Picture or Texture Fill], seperti yang ditunjukkan dalam rajah. 5. Dalam sumber imej, klik Fail Setempat[, seperti yang ditunjukkan dalam rajah. 6. Dalam kotak dialog, pilih gambar yang anda ingin masukkan, dan klik ] untuk membuka butang [, seperti yang ditunjukkan dalam contoh. 7. Ini melengkapkan tetapan imej latar belakang untuk demonstrasi WPS. Kesannya adalah seperti yang ditunjukkan dalam gambar.
Bagaimana untuk menukar imej latar belakang dalam Chi Chi Down? Bagaimana untuk menukar imej latar belakang dalam Chi Chi Down
Mar 04, 2024 pm 03:30 PM
Agaknya semua pengguna di sini sudah biasa dengan perisian Chirp Down, tetapi adakah anda tahu cara menukar imej latar belakang Chirp Down Artikel yang dibawakan kepada anda dalam bab ini ialah cara menukar imej latar belakang Chirp Down , sila baca artikel berikut Sila lihat. Klik ikon "Chirp Down" pada desktop komputer untuk membuka perisian. Masukkan antara muka utama Chi Chi Down dan klik Tetapan. Dalam tetapan, tarik bar kemajuan sepenuhnya ke bawah. (Seperti yang ditunjukkan di bawah) Di bawah Fungsi Lanjutan, klik Sesuaikan Imej Latar Belakang. Cari imej latar belakang yang anda suka dalam fail komputer dan klik untuk membukanya.
Bagaimana untuk menetapkan gambar latar belakang ppt
Mar 25, 2024 pm 04:12 PM
Menetapkan imej latar belakang PPT boleh menambah kesan visual dan menarik pada pembentangan anda. Tutorial ini memperincikan cara memilih imej yang betul, menyediakan imej latar belakang dan melaraskannya supaya sepadan dengan kandungan pembentangan anda. Dengan mengikuti panduan ini, anda boleh mencipta imej latar belakang yang mengagumkan untuk PPT dengan mudah dan meningkatkan kesan keseluruhan pembentangan anda.
ppt背景图片怎么设置全部应用
Jan 07, 2021 pm 04:58 PM
设置方法：1、打开制作好的需要编辑的PPT文件；2、点击“对象属性”按钮，打开“对象属性”菜单，将“填充”设置为“图片或纹理填充”，之后点击“请选择图片”，选择“本地上传”；3、选择背景图片，点击“打开”按钮；4、点击“全部应用”按钮即可。
