写点什么

css 实现模糊镜效果及渐变字体和 text-shadow 冲突解决方案

作者:Java-fenn
  • 2022 年 9 月 12 日
    湖南
  • 本文字数:1329 字

    阅读完需:约 4 分钟

css 实现模糊镜效果及渐变字体和 text-shadow 冲突解决方案


前言今天主要介绍 2 个 css 特效,一个是 css 实现模糊镜效果,就是一个返回顶部标签,或者固底标签,网页滑动的时候看到网页滑动过的部分是模糊的。类型模糊镜子的效果,看哪里哪里背景是模糊的。还有就是解决一个渐变字体或者图片字体添加 text-shadow,阴影会在文字顶部的问题。


css 实现模糊镜子实现高斯模糊,我们用 filter 的 blur 属性,但是高斯是高斯元素本身。其实有个高斯底部的属性,叫


backdrop-filter 就可以轻松实现刚刚说的效果。 注意:backdrop-filter 的当前背景需要一点点透明,不然看不到底部了。实现案例如下:


<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>backdrop-filter 的属性,现在浏览器基本都兼容。但是 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>text-shadow 和文字颜色渐变冲突解决方案问题:


.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;-webkit-text-fill-color: transparent;}发现 text-shadow 在文字顶部,挡住了文字。


解决方案<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;  -webkit-text-fill-color: transparent;  // 去除继承父级样式  text-shadow: none;
复制代码


}一般是通过分层来解决的,放 text-shadow 在底层,真正的渐变文字用伪元素来实现,当然,动态背景可以也放到 attr 里面,css 可以之间拿 attr 里面的东西,这样就可以实现动态配置的渐变字体了。

用户头像

Java-fenn

关注

需要Java资料或者咨询可加我v : Jimbye 2022.08.16 加入

还未添加个人简介

评论

发布
暂无评论
css实现模糊镜效果及渐变字体和text-shadow冲突解决方案_Java_Java-fenn_InfoQ写作社区