消息关闭
    暂无新消息!

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

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


3个回答

︿ 0
<!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>
︿ 0

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

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

  2. 使用神奇的 canvas

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

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

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