css在图片上加仙雾

CSS可以为图片添加各种特效，其中一种就是仙雾特效。在这个过程中，我们需要使用CSS的伪元素和滤镜属性。

首先，我们需要在HTML中加入图片：

img src="picture.jpg" alt="beautiful picture">

接着，在CSS中为这个图片添加样式：

img {
    position: relative;
}
img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#ffffff 10%, transparent 50%);
    filter: blur(10px);
    opacity: 0.5;
}
    

我们使用了伪元素::before来在图片之上创建一个覆盖层。这个覆盖层的颜色由一个径向渐变指定，由白色渐变到透明。这个覆盖层的大小和位置与图片相同。

此外，我们还使用了滤镜blur()来为这个覆盖层添加模糊特效，以增强仙雾效果。我们还使用了opacity属性来降低透明度，以让图片透出一些效果。

通过这些代码，我们就成功地为图片添加了仙雾特效。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！