Rumah >hujung hadapan web >uni-app >Gunakan uniapp untuk mencapai kesan kabur gambar
Gunakan uniapp untuk mencapai kesan kabur gambar
Dengan pembangunan aplikasi mudah alih, semakin banyak aplikasi perlu menambah kesan kabur gambar untuk meningkatkan pengalaman pengguna. Dalam rangka kerja pembangunan uniapp, kita boleh mencapai kesan kabur imej melalui beberapa kod mudah.
statik
dalam projek uniapp atau dalam direktori static
uniapp code> , contohnya bernama <code>blur.jpg
.
static
目录下或者uniapp
的static
目录下添加一张需要模糊的图片,例如命名为blur.jpg
。template
标签中添加如下代码:<template> <view class="container"> <image src="../../static/blur.jpg" class="blur-img"></image> </view> </template>
添加CSS样式
在同一个页面的style
标签或者公共的样式文件中添加以下CSS样式:
<style> .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .blur-img { width: 300px; height: 300px; filter: blur(5px); } </style>
在上述代码中,样式.blur-img
是关键,通过设置其filter: blur(5px)
来实现图片的模糊效果。5px
是模糊的程度,你可以根据需要进行调整。
总结:
通过上述代码示例,我们可以看到,在uniapp开发框架下实现图片模糊效果非常简单。使用filter: blur(5px)
Paparkan gambar pada halaman
template
halaman yang mana gambar perlu dipaparkan: rrreeestyle
pada halaman yang sama atau dalam fail gaya awam: 🎜rrreee .blur-img
ialah kuncinya, dengan menetapkan filter: blur(5px)
untuk mencapai kesan kabur imej. 5px
ialah tahap kekaburan, anda boleh melaraskannya mengikut keperluan. 🎜filter: blur(5px)
untuk mencapai kesan kabur imej dengan mudah. Kita boleh melaraskan tahap kabur mengikut keperluan kita sendiri untuk mencapai kesan yang diingini. Saya harap artikel ini akan membantu anda memahami dan menggunakan uniapp untuk mencapai kesan kabur imej. 🎜Atas ialah kandungan terperinci Gunakan uniapp untuk mencapai kesan kabur gambar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!