目录
  1. 1. 分析结构:
  2. 2. 此处产生两种想法:
  3. 3. 展示环节:
  • 经验总结:
  • 用css制作毛玻璃效果的背景

    最主要的技术很简单,只要了解css的滤镜(filter),这里用的是里面的blur属性。效果图:

    想要模糊效果基本上添加上filter这个属性就会有的,但它会连文字一起模糊,且让背景图片透过半透明的盒子显示出来,色彩已经和背景有很大区别了,像一块没擦干净的玻璃。
    因此:
      1.对要添加模糊效果的元素单独增加一层,模糊层和文字分离使文字不模糊。 
       2.模糊层放入和最外层相同的背景,直接模糊图片色彩不失真。

    分析结构:

        A和C大小位置都要一样,不然模糊的元素和背景不能完美拼接。如下图

    此处产生两种想法:

    1.给body元素在css中添加背景,设置宽度为视口宽度,那么图片将会自适应铺满窗口,在css中为内容盒子增加一个伪元素,伪元素添加背景,调整大小和位置与body中的一样,再给内容盒子加个overflow:hidden大功告成(此处略去一堆细节,仅主要思路)
    2.考虑以后想给背景添加些效果,比如这个大背景的轮播来显示不同的图,或者淡出淡入的来切换等一些其他效果也不错,当然模糊元素里的也同步切换,想想就觉得很漂亮,第一种是在css中添加了背景,但为了后面方便使用JavaScript来制作相应的切换效果,那么需要把背景放入的操作在HTML结构中完成。(本例没有切换效果,日后有空添加)
    本例的html结构:

    1
    body>
    2
        <div class="main">
    3
            <img src="./imgs/3.jpg" alt="">
    4
        </div>
    5
        <div class="box">
    6
            <div class="cover">
    7
                <img id='pic' src="./imgs/3.jpg" alt="">
    8
                <h1>Life is a chess-board</h1>
    9
                <p>The chess-board is the world: the pieces are the phenomena of the universe;the rules of the game are what we call the laws of nature. The player on the other side is hidden from us. We know that his play is always fair, just and patient, but
    10
                    also we know,to our cost, that he never overlooks mistake, or makes the smallest allowance for ignorance.
    11
                </p>
    12
                <span><br>By Thomas Henry Huxley</span>
    13
            </div>
    14
        </div>
    15
    </body>

    两处背景放入结构相似,方便后面JavaScript对清晰背景和模糊背景同步切换操作
    以下是css样表:

    1
    body {
    2
        position: relative;
    3
        height: 2000px;
    4
    }
    5
    6
    .main { /* 固定到窗口相当于一个有切换功能的背景 */
    7
        position: fixed;
    8
        top: 0;
    9
        left: 0;
    10
    }
    11
    12
    .main img {
    13
        width: 100%;
    14
    }
    15
    16
    .cover img { 
    17
        position: absolute;
    18
        filter: blur(10px);
    19
        margin-top: -20px;
    20
        z-index: -1;
    21
    }
    22
    23
    .box {
    24
        width: 100%;
    25
    }
    26
    27
    .cover {
    28
        font-size: 18px;
    29
        width: 800px;
    30
        height: 400px;
    31
        position: relative;
    32
        left: 50%;
    33
        top: 100px;
    34
        margin-left: -400px;
    35
        background-color: pink;
    36
        overflow: hidden;
    37
        box-sizing: border-box;
    38
        z-index: 1;
    39
    }

    怎么让.cover中的img盒子与背景一样大呢,上面的.box元素也许会觉得多余,其实这里是让.box大小与.main背景一样大,再用JavaScript把这个.box的大小给.cover中的img,那么模糊图片就会和背景一样大了
    解决了模糊层大小问题,接下来就是位置问题了
    Js代码:

    1
    window.onload = function() {
    2
        var box = document.querySelector(".box");
    3
        var pic = document.querySelector('#pic');
    4
        var pic = document.querySelector('#pic');
    5
        var boxw = box.offsetWidth;
    6
        var boxh = box.offsetheight;
    7
        var pic = document.querySelector('#pic');
    8
        pic.style.width = boxw + 'px';
    9
        pic.style.height = boxh + 'px';
    10
        pic.style.marginLeft = (400 - boxw / 2) + 'px';
    11
    }

    上部分的位置固定,那么主要是左侧的怎么对齐了,因为.cover采用了以下的水平对齐方式:

    1
    width: 800px;
    2
    position: relative;
    3
    left: 50%;
    4
    margin-left: -400px;

    因此这里通过JavaScript将box.offsetwidth也就是box的宽度值给获取
    Pic要向左走(400 - boxw/2)的距离,是一个负数距离。
    这样一个与背景同位置等大小的模糊玻璃层就出来了:

    基本完成了最开始结构图的样式了
    接下来就是在cover上加个overflow:hidden了,
    再根据自己审美加一下阴影效果吧,相信难不倒大家,到此这个毛玻璃算是完成了,后面的一些效果希望有时间填好自己挖的这个坑吧。

    展示环节:

      因为写之前就考虑了背景切换问题所以换背景十分容易,我就多展示几个吧哈哈~

    经验总结:

    1.踩坑一:定位position里的fixed常用于固定导航条的制作,但是如上例的情况要慎用,小父盒子里装一个大img图片,图片用fixed定到合适的位置后,再想在父盒子上overflow hidden,会发现加了fixes的img如脱缰野马,根本hidden不了,还是这个固定定位太强大了!
    2.这个box元素的作用其实就是在js中充当一个传值媒介,box是视口大小为什么不直接
      document.body.clientWidth、document.body.clientHeight获取浏览器可视界面大小,因为后面想添加效果可能需要这多出来的一层,其次因为box让我安心啊!
    我的目的是让模糊背景大小与背景大小一致,背景要设置全屏,这个box也设置全屏,而最重要的是它俩设置全屏的方式一模一样,那么box的大小传给模糊背景的大小就比较精确了,如果使用直接获取可视界面大小总感觉不放心,怕对不齐,像如果是用 document.body.offsetWidth 还要考虑边线问题。
    3.注意:cover层加z-index等于1让模糊背景显示出来,为了cover里面的img图不遮挡文字,这里把img的z-index等于-1
    4.后面添加.cover边界效果时,盒子大小将会改变,可以简单的通过在css中添加box-sizing: border-box;语句,它改变盒子大小计算方式,不用担心padding、border对盒子大小影响了。

    文章作者: Byron
    文章链接: https://byronk.top/2018/12/04/%E7%94%A8css%E5%88%B6%E4%BD%9C%E6%AF%9B%E7%8E%BB%E7%92%83%E6%95%88%E6%9E%9C%E7%9A%84%E8%83%8C%E6%99%AF/
    版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 byron's | BLOG
    打赏
    • 微信
    • 支付宝

    评论