【CSS】css怎么才能把一张图片局部模糊呢?

Z时代
2024-01-10
分类：技术分享

为了提问,这是我用Photoshop做的,把一个图片中间选出一块然后模糊了,请问用css能做吗?

就是在背景中<div>一个box,然后模糊了……

图片描述

回答：

        <style>
            html,
            body {
                height: 100%;
            }
            .wrap {
                position: relative;
                float: left;
                height: 450px;
                margin: 30px;
                border: 1px solid #000;
            }
            .burl {
                position: absolute;
                left: 0;
                top: 0;
                width: 150px;
                height: 150px;
                overflow:hidden;
                filter: blur(5px);
            }
        </style>
        <div class="wrap">
            <img src="./img/1.png" alt="">
            <div  class="burl">
                <img src="./img/1.png" alt="">
            </div>        </div>

回答：

原理就是利用两份背景图片，一份用来模糊，模糊区域算好距离差设置背景的 background-position。

供参考，可拖动模糊区域试试。

https://codepen.io/straybugs/...

回答：

这个还真没有遇到过，我说几个小方法，你尝试试一下吧，或许其他人还有更好的办法。

拼图每个容器块的宽高固定，调整background-position值其中某个模块设置 filter 属性调整模糊度

使用神奇的 canvas

实际上还是拼图，只不过比第一种方法操作起来简单。设置一个完整的背景图，在上面覆盖一层(也含有对应区域的图像)，调整 top left 定位到固定位置，前提是要掌握好位置。这种方法分不太精确。

最后一个方法，我不知可不可行。你可以试一下。

直接覆盖一个div，然后背景为透明，setting filter 试试？

回答：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>demo</title>
    <style>
        body{background:#19c0ff}
        .blur-box{
            width:300px;
            height:150px;
            color:#f00;
            text-align:center;
            display:table-cell;
            vertical-align:middle;
        }
        .blur-box:before,.blur-box:after{
            top: 20px;
            left: 20px;
            content: '';
            width: 300px;
            height: 150px;
            position: absolute;
        }
        .blur-box:before{
            z-index: -1;
            opacity: 0.5;
            filter: blur(10px);
            background-color: #fff;
        }
        .blur-box:after{
            filter: blur(10px);
        }
    </style>
</head>
<body>
<div class="blur-box">文案</div>
</body></html>