【CSS】设置文字(文本)的渐变色

# 渐变色 文字

第一步 设置渐变颜色
background: linear-gradient(278.83deg, #5022bd 31.42%, #8636d1 75.55%); // 先设置渐变色背景;

第二步 设置颜色的使用范围
background-clip: text; // 背景被裁剪成文字的前景色。
-webkit-background-clip: text;

第三步 将文字颜色设置为透明,这样即可暴露出文字的渐变色背景;
color: transparent;
// 如果你的需求不涉及切换字体颜色可以直接使用这个,否则必须 -webkit-text-fill-color,不然会导致颜色切换过程中会经历 background色 > color色1(此时的transparent) > color色2(你要变更的最终颜色)。 当然你知道了这变更流程,那你也可以将 color色1 设置为color色2一样,然后再加上 `-webkit-text-fill-color: transparent;` ,但写出这种代码蠢毙了!
// -webkit-text-fill-color: transparent;  //  也可以使用这个; 指定文本字符的填充颜色,若未设置此属性,则使用 color 属性的值。

[ 需要注意的是,使用私有前缀的 CSS 属性或值应该始终与其对应的标准语法一起使用,以确保在不同浏览器中都能正常显示样式。此外,为了提高代码的可维护性,一旦某个 CSS 特性成为标准并得到广泛支持,应该逐步去除对应的私有前缀。 ]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/689070.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java学习笔记2024/2/18

1.API 1.1API概述 什么是API API (Application Programming Interface) :应用程序编程接口 java中的API 指的就是 JDK 中提供的各种功能的 Java类,这些类将底层的实现封装了起来,我们不需要关心这些类是如何实现的,只需要学习这…

【性能测试】分布式压测之locust和Jmeter的使用

受限于单台机器的配置问题,我们在单台机器上达不到一个很高的压测并发数,那这个时候就需要引入分布式压测 分布式压测原理: 一般通过局域网把不同测试计算机链接到一起,达到测试共享、分散操作、集中管理的目的。 选择一台作为…

用c语言写扫雷游戏

前言: 今天我们讲的扫雷游戏,在此过程中,我们会经常提两个字,纵横 接下来,正片开始 在开始讲解扫雷游戏之前,我们先来思考一个问题:我们之前的代码是不是都是写在一个源文件里面?那…

提升企业竞争力:精益生产培训简介——张驰咨询

精益生产(Lean Production)是一种管理哲学,最早源于日本丰田汽车公司的丰田生产系统(Toyota Production System,TPS)。这套理念的核心在于最大程度地减少生产过程中的浪费,同时保证产品质量,通过…

sora的理解

1、背景 近期, openai紧跟Runway、 Google、Meta等公司, 发布了视频生成模型Sora, 全面进军视频领域。官网的视频效果炸裂,连贯性优秀,生成视频时长可达60秒,但模拟复杂物理场景仍有瑕疵。相对Pika、Runway的效果还是有进一步提升。考虑到这…

AI界一夜变天

没有丝毫预热和剧透,Open AI深夜直接丢下核弹炸了街,从业者深感要变天。 2月16日凌晨,Open AI发布了首个“文生视频”模型Sora。官方介绍,Sora能根据文字指令创造出包含丰富细节的逼真场景、角色,且能用多角度镜头&am…

Python print函数

在Python编程中,print()函数是一个非常基础但也非常重要的函数,用于将文本或其他对象输出到控制台或文件中。本文将深入探讨Python中的print()函数,包括基本用法、格式化输出、输出重定向、实际应用场景,并提供丰富的示例代码来帮…

栈的应用(表达式求值)C++(Acwing)

代码&#xff1a; #include <iostream> #include <cstring> #include <algorithm> #include <stack> #include <unordered_map>using namespace std;stack<int> num; stack<char> op;void eval()//求值 {auto b num.top(); num.po…

echarts图表中的基本设置参数

取消显示坐标值 axisLabel: { show: false} 取消坐标轴刻度线 axisTick: { show: false} 取消网格线 splitLine: { show: false } 去除y轴的线 //写在yAxis里面 axisLine:{show:false},axisTick:{show:false},去除y轴轴线&#xff08;背景线&#xff09; splitLine…

java生成pdf

1.pdf预览 2.maven <!--pdf--><dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</artifactId><version>5.5.9</version></dependency><dependency><groupId>com.itextpdf</groupId>…

51_蓝桥杯_数码管静态显示

一 电路 二 数码管静态显示工作原理 三 代码 代码1 实现第一个数码管显示数字6的功能 #include "reg52.h"unsigned char code SMG_Duanma[18] {0xc0,0xf9.0xa4,0x99,0x92,0x82,0xf8,0x80,0x90,0x88,0x80,0xc0,0x86,0x8e,0xbf,0x7f};void Delay(unsignde int t) {wh…

创建Maven项目

目录 创建新项目配置Maven配置资源地址下载资源 测试代码 创建新项目 创建一个新项目。 创建包&#xff0c;选择Maven&#xff0c;JDK选择1.8 。 点击创建。 创建完成。 配置Maven 点击设置图标&#xff0c;点击Settings. 搜索maven&#xff0c;点击Builde&#xff0c;…

【STM32 CubeMX】GPIO_HAL库源码分析

文章目录 前言一、GPIO_HAL库源码分析1.1 初始化GPIO1.2 HAL_GPIO_Init源码分析GPIO_InitTypeDef初始化结构体HAL_GPIO_Init函数 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;随着人工智能的不断发展&#xff0c;机器学习这门技…

05.QT坐标系

1. 坐标系原点 坐标系原点就是屏幕/窗口的左上角&#xff0c;X向右增长&#xff0c;Y向下增长。 2.设置控件位置 设置控件位置&#xff0c;就相当于是需要指定控件的坐标&#xff0c;对于该控件来说&#xff0c;其坐标原点是其父窗口/父控件的左上角。 设置方法就是通过控件的…

C++ Webserver从零开始:配置环境(九)——下载github的项目进行测试

前言 大家好&#xff0c;我又来更新Webserver的博客了。上一次更新这个专栏时2024.2.5号&#xff0c;离现在已经13天了。非常抱歉&#xff0c;中间隔了那么久。一方面是基础知识学完之后&#xff0c;就要开始自己写代码了。看基础知识和写代码是两回事&#xff0c;理论和实践的…

BUGKU-WEB 变量1

题目描述 题目截图如下&#xff1a; 进入场景看看&#xff1a; flag In the variable !<?php error_reporting(0); include "flag1.php"; highlight_file(__file__); if(isset($_GET[args])){$args $_GET[args];if(!preg_match("/^\w$/",$args…

数据库概述、部署MySQL服务、必备命令 、密码管理、安装图形软件、SELECT语法 、筛选条件

目录 1 案例1&#xff1a;构建MySQL服务器 1.1 问题 1.2 方案 1.3 步骤 2 案例2&#xff1a;密码管理 2.1 问题 2.2 步骤 3 案例3&#xff1a;安装图形软件 3.1 问题 3.2 方案 3.3 步骤 4 案例4&#xff1a;筛选条件 4.1 问题 4.2 方案 4.3 步骤 1 案例1&#x…

AcWing 1050 鸣人的影分身(复杂DP ——整数划分问题)

[题目概述] 在火影忍者的世界里&#xff0c;令敌人捉摸不透是非常关键的。 我们的主角漩涡鸣人所拥有的一个招数——多重影分身之术——就是一个很好的例子。 影分身是由鸣人身体的查克拉能量制造的&#xff0c;使用的查克拉越多&#xff0c;制造出的影分身越强。 针对不同的作…

【Linux】进程的初步认识(二)

进程的初步认识 前言查看进程通过系统调用创建进程关于创建进程的几点补充 前言 之前的一篇文章(文章链接)已经初步对于进程有了一个认识&#xff0c;这篇文章主要是介绍如何去查看进程的相关信息以及创建一个进程的相关知识 查看进程 查看进程的信息可以在/proc系统文件夹中查…

代码随想录刷题笔记-Day19

1. 二叉搜索树的最小绝对差 530. 二叉搜索树的最小绝对差https://leetcode.cn/problems/minimum-absolute-difference-in-bst/ 给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数&#xff0c;其数值等于两值之差的绝…