公告:携程集团2022年秋季校园招聘会内推!!

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

1048次浏览

前言

今天主要介绍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;
 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里面的东西,这样就可以实现动态配置的渐变字体了。

相关文章: