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

短命女 2023-10-10 21:46 37阅读 0赞

### ![0176285f00bd45e59e31de7de0d68603.png][] ###

### 前言 ###

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

### css实现模糊镜子 ###

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

backdrop-filter

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

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;
     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;
          color: transparent;
          // 去除继承父级样式
          text-shadow: none;
    }

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

[0176285f00bd45e59e31de7de0d68603.png]: https://img-blog.csdnimg.cn/0176285f00bd45e59e31de7de0d68603.png