使用HTML和CSS实现文字镂空效果的代码示例

lichongyang

2 周前

要实现文字镂空效果，可以利用 background-clip 属性和透明度 (opacity) 的结合，来实现文字内部的镂空效果。下面是一个基本的 HTML 和 CSS 代码示例，展示了如何使用文字镂空效果：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字镂空效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="hollow-text">
        镂空文字效果
    </div>
</body>
</html>

CSS (styles.css):

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.hollow-text {
    font-size: 80px;
    font-weight: bold;
    color: transparent; /* 文字颜色透明 */
    background: url('https://www.example.com/path/to/your/image.jpg') no-repeat center center; /* 背景图像 */
    background-size: cover; /* 背景图像覆盖 */
    -webkit-background-clip: text; /* 支持 Webkit 浏览器（如 Chrome, Safari） */
    background-clip: text; /* 支持其他浏览器 */
    text-align: center;
}

解释:

color: transparent; 使文字本身变为透明。
background: url('image.jpg') no-repeat center center; 设置背景图片。你可以替换成任何你喜欢的图片 URL。
background-size: cover; 确保背景图片覆盖整个容器。
background-clip: text; 和 -webkit-background-clip: text; 实现了文字填充背景图像的效果，从而达到了文字镂空的效果。

通过这种方法，文字内部会显示背景图像，看起来像是镂空的效果。

注意： 目前，这种方法主要适用于支持 background-clip: text; 的浏览器（如 Chrome、Safari 和 Edge）。某些老版本的浏览器可能不支持该属性。