CSS3背景裁切——background-clip

最新推荐文章于 2024-06-19 09:37:17 发布

一个前端女子

最新推荐文章于 2024-06-19 09:37:17 发布

阅读量1.2k

点赞数 1

分类专栏： HTML 文章标签： css3

本文链接：https://blog.csdn.net/qq_44173499/article/details/123916962

版权

本文介绍了CSS3的background-clip属性用于文本剪裁，并强调与-webkit-text-fill-color属性配合使用以实现透明文字效果。同时，讨论了不同浏览器的前缀兼容性问题，包括-webkit-、-moz-、-o-和-ms-。

摘要由CSDN通过智能技术生成

background-clip属性：剪裁文本，

注：要和-webkit-text-fill-color属性设置为transparent，确保文字的填充色为透明色，一起使用

浏览器兼容问题：

-webkit- 谷歌浏览器的内核标识码

-moz- 火狐浏览器的内核标识码
-o- 欧朋浏览器的内核标识码
-ms- IE浏览器的内核标识码

代码：

Markup

<!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>
    .title{
        width: 80%;
        height: 500px;
        line-height: 220px;
        text-align: center;
        margin: 0 auto;
        background: url("./img/pic1.jpg");
        font-size: 60px;
        -webkit-background-clip: text;
        -webkit-text-fill-color:

最低0.47元/天解锁文章

一个前端女子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3背景裁切——background-clip

background-clip属性：剪裁文本，注：要和-webkit-text-fill-color属性设置为transparent，确保文字的填充色为透明色，一起使用浏览器兼容问题：-webkit-谷歌浏览器的内核标识码-moz-火狐浏览器的内核标识码-o-欧朋浏览器的内核标识码-ms-IE浏览器的内核标识码代码：Markup<!DOCTYPE html><html lang="en"><head><me...
复制链接

扫一扫

专栏目录