CSS毛玻璃效果如何实现_html/css_WEB-ITnose
毛玻璃效果就是底层模糊，面层清晰的那种
毛玻璃效果
这是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'/ alt="CSS毛玻璃效果如何实现_html/css_WEB-ITnose" > </div> </body> </html>
先搞一个div作为容器层，用来放置风景背景图。
内部放一个div，作为毛玻璃的主体。
再放一个img，显示天气图标。
其实就是三层镶嵌。
容器层
.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-attachment: fixed; 当页面的其余部分滚动时，背景图像不会移动。
- 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 } - background: inherit; 继承父元素的背景
-
毛玻璃的关键点在于 filter:blur ，filter是滤镜的意思，滤镜有很多种，能够像给照片加滤镜效果一样直接加。
``` Alpha：设置透明层次 blur：创建高速度移动效果，即模糊效果 Chroma：制作专用颜色透明 DropShadow：创建对象的固定影子 FlipH：创建水平镜像图片 FlipV：创建垂直镜像图片 glow：加光辉在附近对象的边外 gray：把图片灰度化 invert：反色 light：创建光源在对象上 mask：创建透明掩膜在对象上 shadow：创建偏移固定影子 wave：波纹效果 Xray：使对象变得像被x光照射一样```
Nach dem Login kopieren
图标层
把背景模糊了，是为了凸显出某些东西，这个图标层就是泛指这些要凸显的东西
.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
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1393
52
1205
24
Ist HTML für Anfänger leicht zu lernen?
Apr 07, 2025 am 12:11 AM
HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
Was ist ein Beispiel für ein Start -Tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
Gitee Pages statische Website -Bereitstellung fehlgeschlagen: Wie können Sie einzelne Dateien 404 Fehler beheben und beheben?
Apr 04, 2025 pm 11:54 PM
GitePages statische Website -Bereitstellung fehlgeschlagen: 404 Fehlerbehebung und Auflösung bei der Verwendung von Gitee ...
Wie kann man adaptives Layout der Y-Achse-Position in Webanmerkungen implementieren?
Apr 04, 2025 pm 11:30 PM
Der ad-axis-Position adaptive Algorithmus für Webanmerkungen In diesem Artikel wird untersucht, wie Annotationsfunktionen ähnlich wie Word-Dokumente implementiert werden, insbesondere wie man mit dem Intervall zwischen Anmerkungen umgeht ...
Wie verwendet ich CSS3 und JavaScript, um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken zu erreichen?
Apr 05, 2025 am 06:15 AM
Um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken auf das Bild zu erreichen, müssen viele Webdesigns einen interaktiven Effekt erzielen: Klicken Sie auf ein bestimmtes Bild, um die Umgebung zu machen ...
HTML, CSS und JavaScript: Wesentliche Tools für Webentwickler
Apr 09, 2025 am 12:12 AM
HTML, CSS und JavaScript sind die drei Säulen der Webentwicklung. 1. HTML definiert die Webseitenstruktur und verwendet Tags wie z.
