css毛玻璃效果

時間 2019-11-14

標籤 css 毛玻璃效果欄目 CSS 简体版

原文原文鏈接

毛玻璃其實就是磨砂玻璃，可以模糊的看清背後的風景，讓人感受有種朦朧美，讓界面看上去有些層次感。html

好比：web

高大上啊，接下來確定是眼饞手癢的過程。。。chrome

固然，用ps搞一個全景毛玻璃背景毫無疑問是最省事的，那接下來就沒啥事可幹了。瀏覽器

固然no no no了。post

毛玻璃無疑就是種模糊了，少不了filter blur。url

最終效果（chrome）：spa

天氣預報code

嗯，也算是將就了。。。orm

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    </style>
</head>
<body>
    <div class='container'>
        <div class='frosted-glass'></div>
        <img class='weather' src='cloudy.png'>
    </div>
</body>
</html>

先搞一個div做爲容器層，用來放置風景背景圖。htm

內部放一個div，做爲毛玻璃的主體。

再放一個img，顯示天氣圖標。

容器層：

大小是圖片大小，把風景圖做爲背景顯示，no-repeat。這裏用到一個小技巧，將background-attachment設成fixed，不隨元素滾動，讓子元素繼承了本層的背景後，子元素就變成了一個viewport，移到哪兒就看到背景的哪兒。。。額。。。這句話理解起來有點困難，碼農缺少語言表達也是一大苦惱。。。

        .container{
            width: 287px;
            height: 285px;
            background-image: url(background.png);
            background-repeat: no-repeat;
            background-attachment: fixed;
            overflow: hidden;
        }

毛玻璃層：

這裏的關鍵技巧就是background:inherit，直接使用了父元素的背景，和父級的background-attachment:fixed可完成從相機看世界的各類牛逼效果。

本文的的毛玻璃是全景，固然能夠上半部或者下半部，或者其餘位置，這就看出inherit和fixed牛逼的地方了。

        .frosted-glass{
            width: 287px;
            height: 285px;
            background: inherit;
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -ms-filter: blur(5px);
            -o-filter: blur(5px);
            filter: blur(5px);
            filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);
        }

上面的各類filter爲了兼容各類瀏覽器版本，可度娘可谷歌，隨便啦。

ie6~9的就用filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false)進行兼容。

ie8下的效果，繼續將就吧。

最後就是天氣圖標：

須要把圖標浮在最上層某個位置上，我的不太喜歡使用飛在天上的absolute來解決人間的俗世問題，元素內的定位用margin來做就足夠了，雖然會在頁面的迴流上有影響，但不會產生足夠的影響，好處就是父元素的位置和大小的變更產生後遺症會盡量小，讓absolute來弄，那就頭大了，人間的問題就讓人間的來解決吧。

圖標的position設成relative，是爲了讓它浮在最上面，由於relative的要比默認static的顯示層級高。

定位就用margin來作，固然前提是要把它弄成block級元素，不然就然並卵了。

        .weather{
            width:80px;
            height:80px;
            margin-top: -200px;
            margin-left: 100px;
            position: relative;
            display: block;
        }

至此完成基本效果。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。