今天主要介绍两种CSS特殊效果。一种是模糊镜像效果,即当网页滑动时,将网页的滑动部分返回到顶部标签或返回到固定底部标签的CSS。很模糊。输入模糊镜像效果以查看背景模糊的位置。另一种解决方案是,在渐变字体或图像字体中添加文本阴影时,阴影会显示在文本上方。
要实现高斯模糊,请使用过滤器的模糊特性,但高斯是高斯元素本身。实际上,高斯的底部有一种被称为的性质。
可以轻松实现上述效果。注意:背景文件的当前背景必须稍微透明一些。否则你就看不到下面啦。实施案例包括:
<style> div.background { background: lightblue url(klematis.jpg) no-repeat center; background-size: cover; align-items: center; display: flex; justify-content: center; height: 400px; width: 400px; }
div.transbox { background-color: rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); padding: 20px; margin: 30px; font-weight: bold; } </style> <h1>haorooms text backdrop-filte</h1> <div class="background"> <div class="transbox"> <p>backdrop-filter: blur(5px)</p> </div> </div>
背景文件属性基本上与浏览器兼容。但是,IE、UC、QQ、百度等浏览器可能不兼容,需要兼容的浏览器可以使用替代手段。
此方案不适用于网页。您只需要在网页的特定部分进行此实现。
实装思路,背景固定,表面背景继承外侧背景,表面可以模糊。代码实现如下:
.box { width: 256px; height: 191px; background: url(//haoroomstest.jpg) no-repeat fixed; position: relative; overflow: hidden; } .haoroomsblur{ width: 100px; height: 100px; background: inherit; -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); position: absolute; overflow: hidden; } <div class="box"> <div class="haoroomsblur"></div> </div>
问题:
.front-text{ width: 325px; height: 105px; font-size: 140px; font-family: PingFang SC; font-weight: bold; color: #FFFFFF; text-shadow: 0px 4px 0px #D52A03; background: linear-gradient(180deg, #FFFFFF 0%, #FFE579 100%); -webkit-background-clip: text; color: transparent; }
您可以看到文本的阴影在文本上方,并阻塞了文本。
解决方案
<div text="haoroomsblog">haoroomsblog</div> div { text-align: center; font-size: 80px; position: relative; color: #f6130c; // 设置文字阴影 text-shadow: 0 4px 0 #bc6d05; font-weight: bold; } div::before { content: attr(text); position: absolute; z-index: 10; color: #f6130c; // 渐变样式 background-image: linear-gradient(360deg, #f6130c 0%, #f87052 100%); -webkit-background-clip: text; color: transparent; // 去除继承父级样式 text-shadow: none; }
这通常是通过分层,在最底层放置text-shadow,使用伪元素实现实际的渐变文本来解决的。当然,动态的背景也可以配置为属性,css可以导入事物。它们之间的属性,以实现动态配置的渐变字体。