css实现一个背景模糊图片效果代码

代码语言:html

所属分类:布局界面

代码描述:css实现一个背景模糊图片效果代码

代码标签: 背景 模糊 图片 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>




    <style>
        body {
            background: url('//repo.bfw.wiki/bfwrepo/image/6100ab7849d0d.png') no-repeat center center fixed;
            background-size: cover;
            font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        }

        .blur {
            background: url('//repo.bfw.wiki/bfwrepo/image/6100ab7849d0d.png') no-repeat center center fixed;
            background-size: cover;
            overflow: hidden;
            filter: blur(13px);
            position: absolute;
            height: 300px;
            top: -50px;
            left: -50px;
            right: -50px;
            bottom: -50px;
        }

        .widget {
            border-top: 2px solid rgba(255, 255, 255, .5);
            border-bottom: 2px solid rgba(255, 255, 255, .5);
            height: 200px;
            width: 100%;
            overflow: hidden;
        }

        .center {
            position: absolute;
           .........完整代码请登录后点击上方下载按钮下载查看

网友评论0