首页 > 其他分享 >CSS实现文字颜色渐变效果

CSS实现文字颜色渐变效果

时间:2023-03-06 22:22:53浏览次数:41  
标签:文字 颜色 color 渐变 裁剪 实现 background CSS

略微搜索查阅了网上的实现方法:

 

1.给元素添加背景渐变色,通过背景裁剪其中文字,再将文字设置为透明即可实现。(兼容性问题请自行添加浏览器前缀)

background-color:linear-gradient(to right bottom,#00f260, #0575e6);

background-clip:text;

color:transparent;

 

2.给元素添加背景图片,通过背景裁剪其中文字,再将文字设置为透明即可实现。

background:url(".........");

余下两行属性设置同上。方法网上还有很多

 

 

 

 

                                             原打算杭漂,没有公司愿意线上面,只能等毕业再看看了。毕设这个月也必须搞定,有点拖后腿

标签:文字,颜色,color,渐变,裁剪,实现,background,CSS
From: https://www.cnblogs.com/zibai/p/17185747.html

相关文章

  • 扁平化简单按钮css样式
    扁平化简单按钮css样式按钮:代码:<buttonid="btn">打印</button>//js写法$("#btn").css({"font-family":"'微软雅黑','HelveticaNeue',Helvetica,Arial,sans-serif","f......
  • echarts 曲线图实现 - 下方带阴影渐变效果
          lineOption5:{tooltip:{trigger:'axis',axisPointer:{type:'cross',label:{color......
  • CSS 入门
    0x1CSS什么是CSS层叠(Cascading)样式(Style)表(Sheets)用来定义页面元素的样式(字体、颜色、位置、大小、动效等)CSS代码构成选择器{属性:属性值;(声明=......
  • 边框颜色
     border-color属性用于设置边框的颜色。可以设置的颜色:name-指定颜色的名称,如"red"RGB-指定RGB值,如"rgb(255,0,0)"Hex-指定16进制值,如"#ff0000"您......
  • css画对钩|钩子
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title......
  • markdown常用颜色
    按Markdown支持内嵌HTML与用KaTex/MathJax的代码。因此共有两种方式,可以使用H5的方式,也可以使用KaTex/MathJax的方式。对于颜色,可以使用颜色名(大多数的浏览器都支持......
  • HTML与CSS手写-4.实现常用布局(三栏、圣杯、双飞翼、吸顶),可是说出多种方式并理解其优缺
    实现常用布局两栏布局三栏、圣杯、双飞翼圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应......
  • HTML与CSS手写-1.手写图片瀑布流效果
    1.column多行布局实现瀑布流column 实现瀑布流主要依赖两个属性。column-count 属性,是控制屏幕分为多少列。column-gap 属性,是控制列与列之间的距离。<!DOCTYPEht......
  • HTML与CSS手写-2.使用CSS绘制几何图形(圆形、三角形、扇形、菱形等)
    使用CSS绘制几何图形(圆形、三角形、扇形、菱形等)//圆形<divclass="circle"></div><style>.circle{border-radius:50%;width:80px;height:80px;backg......
  • CSS3-选择器
    关系选择器E+F:下一个满足条件的兄弟元素节点div+p(选中和div并列的第一个p)E~F:所有满足条件兄弟元素节点div~p(选中和div并列的所有p)属性选择器div[class......