css实现毛玻璃效果
CSS遮罩效果和毛玻璃效果都是比较常用的，这节课我们就举例子详解怎么实现毛玻璃效果：
半透明颜色
半透明颜色最初的使用场景之一就是作为背景。将其叠放在照片类或其他花哨的背层之上，可以减少对比度，确保文本的可读性
下面是一个实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .outer{ position:relative; height: 200px; width: 200px; background: hsl(20,40%,90%); background-image:linear-gradient(90deg,#fb3 11px,transparent 0), linear-gradient(90deg,#ab4 23px,transparent 0), linear-gradient(90deg,#655 41px,transparent 0); background-size: 41px 100%,61px 100%,83px 100%; } .inner{ position:absolute; top: 0;right: 0;left: 0;bottom: 0; font: bold 20px/1.5 '宋体'; height: 160px; width: 180px; margin:auto; background:hsla(0,0%,100%,.3); } </style> </head> <body> <div class="outer"> <div class="inner">期权记本文的第一个例子</div> </div> </body> </html> 
【增大不透明度】
设置为30%的不透明度，文字难以看清。当然，可以通过提升不透明度来增加文本可读性，但效果整个效果就没有那么生动了
background:hsla(0,0%,100%,.6);
自已去试一下，这个跟上面的代码差不多，就不举例了。
模糊处理
在传统的平面设计中，通常把文本层所覆盖的那部分图片区域作模糊处理。模糊的背景看起来不那么花哨，因此在它之上的文本就相对比较易读了。过去，由于模糊运算的性能消耗极其巨大，以致于这个技巧在网页设计中鲜有用武之地。不过，随着GPU的不断进化以及硬件加速的不断普及，眼下这个技巧已经逐渐流行起来
【父元素模糊】
如果直接对父元素设置模糊，则文本本身也会被模糊处理
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .outer{ position:relative; height: 200px; width: 200px; background: hsl(20,40%,90%); background-image:linear-gradient(90deg,#fb3 11px,transparent 0), linear-gradient(90deg,#ab4 23px,transparent 0), linear-gradient(90deg,#655 41px,transparent 0); background-size: 41px 100%,61px 100%,83px 100%; filter:blur(5px); } .inner{ position:absolute; top: 0;right: 0;left: 0;bottom: 0; font: 20px/1.5 '宋体'; height: 160px; width: 180px; margin:auto; background:hsla(0,0%,100%,.6); } </style> </head> <body> <div class="outer"> <div class="inner">第二个例子</div> </div> </body> </html> 
【伪元素模糊】
因此，对一个伪元素进行处理，然后将其定位到元素的下层
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .outer{ position:relative; height: 200px; width: 200px; z-index:1; background: hsl(20,40%,90%); background-image:linear-gradient(90deg,#fb3 11px,transparent 0), linear-gradient(90deg,#ab4 23px,transparent 0), linear-gradient(90deg,#655 41px,transparent 0); background-size: 41px 100%,61px 100%,83px 100%; } .inner:before{ content:''; position:absolute; top: 0;right: 0;left: 0;bottom: 0; filter:blur(5px); background: rgba(255,0,0,0.5); z-index:-1; } .inner{ position:absolute; top: 0;right: 0;left: 0;bottom: 0; font: 20px/1.5 '宋体'; height: 160px; width: 180px; margin:auto; background:hsla(0,0%,100%,.3); } </style> </head> <body> <div class="outer"> <div class="inner">本文例子3</div> </div> </body> </html> 
背景复制
下面复制父级元素的背景来替换半透明的红色。如果保证毛玻璃下的背景正好与父元素背景的图案相吻合呢？使用fixed即可，将父元素和伪元素的背景设置为相同，且都相对于视口设置，可实现目标
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .outer{ position:relative; height: 200px; width: 200px; z-index:1; background: hsl(20,40%,90%) fixed; background-image:linear-gradient(90deg,#fb3 11px,transparent 0), linear-gradient(90deg,#ab4 23px,transparent 0), linear-gradient(90deg,#655 41px,transparent 0); background-size: 41px 100%,61px 100%,83px 100%; } .inner:before{ content:''; position:absolute; top: 0;right: 0;left: 0;bottom: 0; filter:blur(5px); background: hsl(20,40%,90%) fixed; background-image:linear-gradient(90deg,#fb3 11px,transparent 0), linear-gradient(90deg,#ab4 23px,transparent 0), linear-gradient(90deg,#655 41px,transparent 0); background-size: 41px 100%,61px 100%,83px 100%; z-index:-1; } .inner{ position:absolute; top: 0;right: 0;left: 0;bottom: 0; font: 20px/1.5 '宋体'; height: 160px; width: 180px; margin:auto; background:hsla(0,0%,100%,.3); } </style> </head> <body> <div class="outer"> <div class="inner">本文例子4</div> </div> </body> </html> 
样式封装
毛玻璃样式封装如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .frostedglass{ width: 100px; height: 100px; font-size:16px; /*计算值为 height - width*top*2*/ line-height: 70px; z-index:1; border-radius:50%; position:relative; overflow: hidden; text-align:center; background: hsl(20,40%,90%) fixed; background-image:linear-gradient(90deg,#fb3 11px,transparent 0), linear-gradient(90deg,#ab4 23px,transparent 0), linear-gradient(90deg,#655 41px,transparent 0); background-size: 41px 100%,61px 100%,83px 100%; } .frostedglass-inner:before{ content:''; position:absolute; top: 0;right: 0;left: 0;bottom: 0; filter:blur(5px); background: hsl(20,40%,90%) fixed; background-image:linear-gradient(90deg,#fb3 11px,transparent 0), linear-gradient(90deg,#ab4 23px,transparent 0), linear-gradient(90deg,#655 41px,transparent 0); background-size: 41px 100%,61px 100%,83px 100%; z-index:-1; } .frostedglass-inner{ position:absolute; top: 15%;right: 15%;left: 15%;bottom: 15%; background:hsla(0,0%,100%,.3); } </style> </head> <body> <div class="frostedglass"> <div class="frostedglass-inner">JavaScript</div> </div> <div class="frostedglass"> <div class="frostedglass-inner">HTML/css</div> </div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知