CSS文字镂空效果实战 - 3种方法打造通透视觉标题

更新日期: 2025-06-09阅读: 173标签: 效果

前端开发中,文字镂空效果(又称"文字挖空")是提升视觉冲击力的常用技巧。这种效果让文字内部透明,透过文字可以看到背景内容,常用于Banner标题、海报设计和数据大屏等场景。本文将深入解析3种css实现方案,帮你轻松掌握这一实用技能。


一、基础方案:text-stroke属性(现代浏览器首选)

实现原理
通过给文字添加描边,并将文字颜色设为透明,只保留描边部分,形成镂空效果。

.hollow-text {
  font-size: 4rem;
  font-weight: bold;
  color: transparent; /* 关键:文字透明 */
  -webkit-text-stroke: 2px #3498db; /* 描边宽度和颜色 */
  text-stroke: 2px #3498db;
}

效果特点

  • 实现简单,仅需两行核心代码

  • 支持渐变描边:text-stroke: 2px linear-gradient(...)

  • 兼容性:现代浏览器支持良好(IE除外)

进阶技巧 - 动态渐变背景

<div class="banner">
  <h1 class="hollow-title">夏日特惠</h1>
</div>
.banner {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
  padding: 3rem;
}

.hollow-title {
  font-size: 5rem;
  color: transparent;
  -webkit-text-stroke: 3px #fff;
  text-stroke: 3px #fff;
  text-shadow: 0 0 10px rgba(255,255,255,0.7); /* 添加发光效果 */
}
此时文字区域会透出背景渐变,形成动态视觉


二、兼容方案:伪元素叠加法(全浏览器支持)

实现原理
使用两层文字叠加,底层为描边文字,顶层为小一号的实心文字,通过错位形成镂空边缘。

.hollow-compatible {
  position: relative;
  font-size: 4rem;
  font-weight: bold;
  color: #2980b9; /* 描边色 */
}

/* 创建镂空层 */
.hollow-compatible::after {
  content: attr(>); /* 复用元素文字 */
  position: absolute;
  top: 3px; /* 微调位置 */
  left: 3px;
  color: white; /* 背景色 */
  font-size: 0.92em; /* 略小于原文字 */
}
<!-- 使用data-text属性传递内容 -->
<h2 class="hollow-compatible" >="限时抢购">限时抢购</h2>

优势

  • 兼容所有浏览器(包括IE9+)

  • 可通过调整top/left值和字体大小控制镂空厚度

  • 支持复杂背景(图片、视频背景均可)


三、高级方案:background-clip文本裁剪(创意效果)

实现原理
利用background-clip: text将背景裁剪到文字区域,结合text-fill-color实现镂空。

.hollow-advanced {
  font-size: 4rem;
  font-weight: 900;
  background: url(../images/texture.jpg) center/cover; /* 任意背景 */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* 或使用text-fill-color */
  -webkit-text-fill-color: transparent;
  /* 添加描边增强效果 */
  text-shadow: 
    2px 2px 0 #fff, 
    -2px -2px 0 #fff;
}

创意扩展 - 动态视频背景

.video-hollow {
  position: relative;
}

.video-hollow video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.video-hollow h1 {
  font-size: 6rem;
  background: white; /* 关键:取视频帧需特殊处理 */
  mix-blend-mode: screen; /* 混合模式 */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


四、实战技巧与注意事项

  1. 字体选择

    • 优先选用粗体字(如Impact、Bebas Neue)

    • 避免衬线字体,镂空效果更明显

  2. 描边优化

    /* 消除锯齿 */
    text-shadow: 
      0 0 1px #fff, 
      0 0 1px #fff, 
      0 0 1px #fff;
  3. 响应式适配

    /* 根据屏幕调整描边粗细 */
    .hollow-text {
      --stroke-width: 2px;
      -webkit-text-stroke: var(--stroke-width) blue;
    }
    
    @media (max-width: 768px) {
      .hollow-text {
        --stroke-width: 1px;
        font-size: 2.5rem;
      }
    }
  4. 可访问性保障

    • 确保背景与描边有足够对比度

    • 提供备用样式:@supports not (background-clip: text) { ... }

    • 添加文字阴影提升可读性


五、应用场景实例

  1. 电商促销Banner

    .sale-banner h1 {
      font-size: 5rem;
      color: transparent;
      -webkit-text-stroke: 3px #e74c3c;
      background: url(confetti.png);
      animation: shine 3s infinite;
    }
    
    @keyframes shine {
      0% { text-shadow: 0 0 5px #f1c40f; }
      50% { text-shadow: 0 0 20px #f1c40f; }
      100% { text-shadow: 0 0 5px #f1c40f; }
    }
  2. 数据大屏标题

    .dashboard-title {
      -webkit-text-stroke: 1px rgba(0,247,255,0.8);
      color: transparent;
      text-shadow: 0 0 10px #00f7ff;
    }
  3. 图片水印

    .watermark::after {
      content: "严禁转载";
      position: absolute;
      bottom: 20px;
      right: 20px;
      font-size: 2rem;
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,0.7);
      opacity: 0.6;
    }


浏览器兼容性解决方案

方法ChromeFirefoxSafariEdgeIE
text-stroke✓ 54+✓ 4+✓ 79+
伪元素叠加✓ 全版本✓ 全版本✓ 全版本✓ 全版本✓ 9+
background-clip✓ 4+✓ 49+✓ 3.1+✓ 12+

IE兼容方案

/* 仅IE生效的hack */
@media all and (-ms-high-contrast: none) {
  .hollow-text {
    color: #3498db; /* 显示为实心色 */
    position: relative;
  }
  .hollow-text::after {
    content: attr(>);
    position: absolute;
    top: 2px;
    left: 2px;
    color: white;
    font-size: 0.95em;
  }
}


总结
CSS文字镂空效果通过三种方式实现:

  1. text-stroke:现代项目首选,代码简洁

  2. 伪元素叠加:兼容性最佳,支持复杂场景

  3. background-clip:创意效果之王,支持动态背景

建议:在深色背景上使用浅色描边(白/黄/蓝),在复杂背景上添加文字阴影增强可读性。避免在小字号文本使用,最小字号建议≥24px。

掌握这些技巧后,你可以轻松创建出吸引眼球的标题效果,无需设计师协助也能制作专业级视觉方案。

链接: https://fly63.com/article/detial/12736

使用 JavaScript 实现分屏视觉效果

今天这篇文章就来讲讲使用JavaScript来实现这种分屏的视觉UI效果。现在在网站上这种分屏视觉效果应用的也非常广泛,比如 Corsair website。

CSS3的过渡效果,使用transition实现鼠标移入/移出效果

在css中使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬。以前如果要实现过渡,就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式平滑的切换到另一组样式。

js如何实现新手引导效果?

js最近有个小伙伴问到了怎么实现新手引导的效果,然后便去网上找了下实现方案。可以通过css的border来实现。

css3 斜切角/斜边的实现方式

设计图含有斜切角的效果时,我们一般想到的方法是切出四个角为背景,然后用border连起来,这样就能显示出该效果了,那么直接使用css呢?下面就整理css做斜边的效果。

JavaScript 实现打字机效果,跑马灯效果

这篇文章在不使用任何插件的情况,以最简洁的原生javascript来实现打字机效果和跑马灯效果。打字效果即把一段话一个字一个字的显示出来。

CSS遮罩效果(模糊效果,阴影效果,毛玻璃效果)

一般遮罩加上透明度opacity就是阴影效果。阴影效果和一般遮罩一样,唯一不同的是设置.mask遮罩的背景色用rgba()表示,当然hsla()也是可以的。模糊效果(毛玻璃效果) 通过 filter来实现

纯css实现气泡效果

主要运用的是1.border 组成的直角三角形。2,before 和 after 伪元素 。3,z-index属性;将元素的长宽设置为0,并且将border的3条边设置为透明的,就会出现border颜色的直角三角形

css文字选中效果

文字选中效果,这个可能很少有人注意过。在默认状态先一般选中的文本颜色是白字蓝底的,不过可以通过CSS进行设置。::selection定义元素上的伪选择器,以便在选定元素时设置其中文本的样式。

text-fill-color:仿苹果官网介绍效果 CSS设置文字渐变效果 文字背景图遮罩

发布iPhone XR的时候 各种心动 去官网看了一遍又一遍。闲着无聊发现 里面的介绍很用大篇幅的有背景文字来介绍。Like this:看着挺酷炫的还不错 就看了下实现方式。还挺简单的。

Vue 中多个元素、组件的过渡,及列表过渡

多元素之间如何实现过渡动画效果呢?这么写行不行呢?肯定是不行的,因为 Vue 在两个元素进行切换的时候,会尽量复用dom,就是因为这个原因,导致现在动画效果不会出现。如果不让 Vue 复用dom的话,应该怎么做呢?只需要给这两个div不同的key值就行了

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!