一般展示图片,仅需要能后展示出来即可。如:
但是,如果需要展示模糊的效果,该如何调整呢?
期望效果如下:
刚开始思路是想在图片上面盖上一个容器,然后调整容器的透明度,发现效果并不理想。
效果如图:
然后研究了一下css的,发现CSS有一个属性filter
。
作用是将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。
将该属性设置给图片即可。
代码:
<template>
<image src='...'/>
</template>
<style>
image{
filter: blur(5px); //具体效果可自行调整
}
</style>
如此即可实现图片模糊效果