当前位置:首页 > 前端技术 > css Backgroud-clip (文字颜色渐变)

css Backgroud-clip (文字颜色渐变)

2022年11月10日 10:56:17前端技术10

首先来瞄一下background-clip,这个属性是干嘛的?

顾名思义,背景裁剪...   按照我自己的理解就是背景的显示区域

此处粘上MDN的示例链接(嫌麻烦的,后面我也贴上截图)https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip

background-clip共有4个属性值,默认是border-box

css Backgroud-clip (文字颜色渐变) _ JavaClub全栈架构师技术笔记

padding-box(背景显示区域不包括边框线)

css Backgroud-clip (文字颜色渐变) _ JavaClub全栈架构师技术笔记

content-box(背景显示区域只有内容)

css Backgroud-clip (文字颜色渐变) _ JavaClub全栈架构师技术笔记

最后一个属性值:text,也就是做文字渐变的重点了,这个效果类似于PS里的剪贴蒙版,效果图:

css Backgroud-clip (文字颜色渐变) _ JavaClub全栈架构师技术笔记

代码:

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <link rel="stylesheet" href="./index.css">
</head>
<style>
    .box{
        display: inline-block;
        font-size: 48px;
        font-weight: bold;
        background:linear-gradient(45deg,red,blue,yellow,green);
        background-clip: text;
        -webkit-background-clip: text;
        color:transparent;
    }
    p{
        margin:0;
    }
</style>
<body>
    <div class="box">
        <p>落魄前端</p>
        <p>在线炒粉</p>
    </div>
</body>

那这个属性兼容性方面又怎么样呢?

目前IE浏览器不支持 text,其他浏览器则需要加上兼容前缀,但其他属性值大部分都支持了(真是个让人伤心的消息)

不过这个属性用来做文字的渐变确实很方便,还可以将背景图片剪贴到文字上

css Backgroud-clip (文字颜色渐变) _ JavaClub全栈架构师技术笔记

 

作者:WahFung
来源链接:https://www.cnblogs.com/chanwahfung/p/11295004.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/69256.html

标签: css
分享给朋友:

“css Backgroud-clip (文字颜色渐变)” 的相关文章

html标签属性大全(囊括CSS、CSS3、H5、XML等)

转载:https://www.w3school.com.cn/tags/tag_html.asp 作者:zhzhsgg 来源链接:https://blog.csdn.net/zhzhsgg/article/details/1130...

css中的@media用法总结

1、head标签中引入 //语法: @media mediatype and | not | only (media feature) { css-code; } //也可以针对不同的媒体使用不同的stylesheets: <!--<link rel="st...

CSS放置显示a标签的下划线

  text-decoration: underline; text-decoration属性规定文本修饰(下划线 underline、上划线 overline、中划线 line-through) 作者:迷豆腐 来源链接:https://blog.cs...

优秀工具推荐:超实用的 CSS 库,样板和框架

优秀工具推荐:超实用的 CSS 库,样板和框架

当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。   当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文...

CSS文字样式

notice:文字样式会被继承 一、常用的文字样式 1、设置文字的颜色    color:red; 2、设置文字的大小  font-size:30px; 3、设置文字的粗细,bold为加粗...

修改nui-app中rich-text富文本内容的css样式

如何修改rich-text富文本内容的css样式 以图片举例: 我们可以使用正则匹配的方式为富文本的标签加上类名: 富文本渲染数据.replace(/\<img/gi, '<img class="richImg"'); 然...

3D 穿梭效果?使用 CSS 轻松搞定

3D 穿梭效果?使用 CSS 轻松搞定

背景 周末在家习惯性登陆 Apex,准备玩几盘。在登陆加速器的过程中,发现加速器到期了。 我一直用的腾讯网游加速器,然而点击充值按钮,提示最近客户端升级改造,暂不支持充值(这个操作把我震惊了~)。只能转头下载网易 UU 加速器。 打开 UU 加速器首页,映入眼帘的是这...

html链接外部css代码,html如何调用外部css?

html链接外部css代码,html如何调用外部css?

CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。 方法1:使用来引入外部的css文件 在网页的...

css实现li标签不可点击

css实现li标签不可点击,代码如下: style="pointer-events: none;" 作者:不平凡中的平凡 来源链接:https://blog.csdn.net/weixin_40667880/article...

博客园 页面定制CSS代码

博客园 页面定制CSS代码

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。