神奇的css之 -webkit-background-clip: text; 属性

最新推荐文章于 2025-06-19 18:06:40 发布

浅浅Chen

最新推荐文章于 2025-06-19 18:06:40 发布

阅读量1.5w

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/chenjingshen1214/article/details/87365923

本文介绍了一种使用纯CSS实现的炫彩文字效果，该效果在苹果官网上被应用，通过背景图片和特定CSS属性结合，使文字呈现出多彩且透明的效果。文章提供了完整的HTML和CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近浏览苹果官网，无意间发现苹果官网的一排文字的彩色效果，刚开始以为是图片，但是当我按住ctrl+A的时候，惊奇地发现这五彩斑斓的文字居然是用纯css实现的，顿时对这神奇的文字产生了兴趣。

废话不多说，下面是效果和代码，喜欢的朋友欢迎关注：

<!DOCTYPE html>

<html lang="en">



<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

body {

background: #000;

}



div {

margin: auto;

width: 60%;

height: 800px;

line-height: 100px;

text-align: center;

font-size: 40px;

font-weight: bold;

color: transparent;

background: url('./images/iphone.jpg') no-repeat center center;

background-size: cover;

-webkit-background-clip: text;

}

</style>

</head>



<body>

<div>上的这款全新显示屏，是 iPhone 迄今最先进的 LCD 屏。创新的背光设计，让显示屏一直延伸到了机身边角。因此看上去，整个屏幕都被鲜活生动的色彩铺满。</div>

</body>



</html>