ホームページ > 記事 > ウェブフロントエンド > CSS すりガラス効果を実現する方法_html/css_WEB-ITnose
CSS すりガラス効果を実現する方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:46:581158ブラウズ
すりガラス効果は、下層がぼかされ、表面層が透明です
すりガラス効果
これは、 htmlソースファイル
< !DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div class='container'> <div class='frosted-glass'></div> <img class='weather' src='cloudy.png'/> </div> </body> </html>
まず横向きの背景画像を配置するコンテナレイヤーとしてdivを作成します。
すりガラスの本体として中にdivを入れます。
天気アイコンを表示するには、別の画像を配置します。
実は三層のインレイなんです。
コンテナーレイヤー
.container{ width: 287px; //设置好容器层的大小，宽和高，这样就先固定了这个容器层， height: 285px; background-image: url(background.png); //填充一个背景图，这个背景图的大小要跟容器的宽高是一样的，因为设置了no-repeat，所以如果太小就会出现填充不满 //当然可以设置background-size:100% 100%之类 background-repeat: no-repeat; background-attachment: fixed; //设置这个的原因主要是为了将背景图固定好，这个固定是相对浏览器而言，所以直接的效果就是相对于用户来说，滚动浏览器也能看到背景图 //但这个并不作为毛玻璃效果显示的技术点。 overflow: hidden; } - 背景添付: 固定; ページの残りの部分がスクロールしても背景画像は移動しません。
- background-repeat: no-repeat; 背景画像を非リピートに設定します
- overflow: hidden; 余分な部分は表示されません
曇りガラスレイヤー
.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); //兼容ie } - 背景: 親要素の背景を継承します
-
曇りガラスのポイントはフィルター:ぼかし、フィルターはフィルターを意味します。写真にフィルター効果を追加することは、フィルター効果を直接追加することと同じです。
``` Alpha：设置透明层次 blur：创建高速度移动效果，即模糊效果 Chroma：制作专用颜色透明 DropShadow：创建对象的固定影子 FlipH：创建水平镜像图片 FlipV：创建垂直镜像图片 glow：加光辉在附近对象的边外 gray：把图片灰度化 invert：反色 light：创建光源在对象上 mask：创建透明掩膜在对象上 shadow：创建偏移固定影子 wave：波纹效果 Xray：使对象变得像被x光照射一样```
アイコン レイヤー
このアイコン レイヤーは、通常、強調表示する必要があるものを指します。
.weather{ width:80px; height:80px; margin-top: -200px; margin-left: 100px; position: relative; //这里用相对布局，通过margin来调整位置，这样主要是为了更方便的跟随容器层一起移动或者显示。 //并且图标的position设成relative，是为了让它浮在最上面，因为relative的要比默认static的显示层级高。 display: block; } 参考: http://www.jb51.net/css/412009.html
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。