源码哥,靠谱的网站源码下载站 帮助 每日签到

源码哥

广告位《资讯详情页横幅-1150*?》

CSS实现模糊镜像效果、渐变字体和文本阴影冲突解决方案

  • 发布者:源码哥 时间:2022-09-23 10:00 阅读:35
  • 扫一扫,手机访问
广告位《资讯详情页摘要上方横幅-828*?》
摘要:今天主要介绍两种CSS特殊效果。一种是模糊镜像效果,即当网页滑动时,将网页的滑动部分返回到顶部标签或返回到固定底部标签的CSS。很模糊。输入模糊镜像效果以查看背景模糊的位置。另一种解决方案是,在渐变字体或图像字体中添加文本阴影时,阴影会显示在文本上方。CSS实现模糊镜像要实现高斯模糊,请使用过滤器的模糊特性,但高斯是高斯元素本身。实际上,高斯的底部有一种被称为的性质。背景过滤器可以轻松实现上述效果。注意:背景文件的当前背景必须稍微透明一

今天主要介绍两种CSS特殊效果。一种是模糊镜像效果,即当网页滑动时,将网页的滑动部分返回到顶部标签或返回到固定底部标签的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可以导入事物。它们之间的属性,以实现动态配置的渐变字体。


相关连接: 网站源码 企业网站源码

  • 全部评论(0)
上一篇:已是第一篇内容
下一篇:css背景属性:background-size
广告位《资讯详情页最新发布上方横幅-828*?》
最新发布的资讯信息
【网站开发|HTML】html编码设置(2022-10-17 11:26)
【网站开发|HTML】html添加注释的方法(2022-10-17 11:25)
【网站开发|HTML】html元素(2022-10-17 11:23)
【网站开发|HTML】html属性介绍(2022-10-17 11:22)
【网站开发|HTML】html标签说明(2022-10-17 11:21)
【网站开发|HTML】html的基本结构(2022-10-17 11:20)
【行业资讯|】如何学习好网站前端开发?(2022-10-14 14:53)
【网站开发|JavaScript】如何轻松学习JavaScript(2022-10-14 14:26)
【网站开发|node.js】NodeJS Service Docker映像终极优化指南(2022-10-14 14:14)
【网站开发|JavaScript】后端response响应返回图像,前端怎么下载图片?(2022-09-23 10:17)
联系我们
Q Q:472206683
微信:472206683
邮箱:472206683@qq.com
时间:09:00 - 24:00
联系客服
售前咨询 网站搭建 技术支持 联系客服
18639176864
手机版
手机版二维码
扫一扫进手机版
返回顶部