当前位置: 首页 > news >正文

CSS之实现线性渐变背景

1. background: linear-gradient()

background: linear-gradient是CSS中用于创建线性渐变背景的属性,这个属性允许你定义一个在元素的背景中进行渐变的效果,可以从一个颜色过渡到另一个颜色。
基本语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);
  • direction: 渐变的方向,可以是角度(deg)或关键词(to top, to right, to bottom, to left,to left bottom, to left top…),其中角度自下而上方向为0deg,延顺时针方向角度数增加。
  • color-stop: 渐变中的颜色和它们的位置(写法:颜色 位置)。颜色可以是任何有效的颜色值,位置是一个百分比或长度值。

下面我们通过一个简单的例子来学会以上基本语法:
.vue

<template><div></div>
</template><style lang="scss" scoped>
* {position: relative;top: 50%;left: 50%;transform: translate(-50%, 20%);
}
div {width: 600px;height: 400px;background: linear-gradient(0deg, #f00 100px, #00f calc(100% - 100px));
}
</style>

运行上述代码会得到方向自上而下,颜色在自上下方向上0px到100px红色,100px到500px红色渐变为绿色,500px到600px为绿色的包含渐变效果的矩形,如下图:
在这里插入图片描述

参数direction的角度取自下而上为0度,角度参数是按顺时针旋转,如下图:
在这里插入图片描述
我们可以通过浏览器来验证角度变化的效果:
在这里插入图片描述

通过改变上图中的指针指向我们可以得到不同角度的渐变效果,如下图:
90deg
在这里插入图片描述

180deg

在这里插入图片描述

270deg
在这里插入图片描述

2. 实战

1. 菱角矩形

在这里插入图片描述

代码如下:

<template><div></div>
</template><style lang="scss" scoped>
* {position: relative;top: 50%;left: 50%;transform: translate(-50%, 20%);
}
div {width: 300px;height: 400px;background: linear-gradient(-45deg, transparent 20px, #f0f0f0 20px, #f0f0f0 calc(100% - 20px), transparent calc(100% - 20px),transparent 100%);
}
</style>

实现效果如下:
在这里插入图片描述

2. 折角矩形

在这里插入图片描述
代码如下:

<template><div></div>
</template><style lang="scss" scoped>
* {position: relative;top: 50%;left: 50%;transform: translate(-50%, 20%);
}div {width: 600px;height: 400px;// 注意点:// 1. 层级高的linear-gradient应该写在前面 // 2. to left bottom等同于225deg // 3. 背景图的尺寸使用%相对于的是盒子的尺寸,而linear-gradient内的渐变尺寸使用%是相对于背景图的尺寸的// 4. linear-gradient内的位置计算是跟角度相关的,如45%,则位置会从左上角开始算起,向右下角移动45%的距离//    因此这里的右上角小三角的宽高为 42px 42px(30/sin(45°)算出)background: linear-gradient(to left bottom,transparent 50%, rgba(0,0,0.6) 50%, rgba(0,0,0.6) 100%) no-repeat 100% 0 / 42px 42px,linear-gradient(225deg, transparent 30px, #5186ac 30px, #5186ac 100%) no-repeat 100% 100%,;
}
</style>

实现效果:
在这里插入图片描述
注意点:

  1. 层级高的linear-gradient应该写在前面(如上图的右上角小三角)
  2. to left bottom等同于225deg(常规转换)
  3. 背景图的尺寸使用%时是相对于盒子的尺寸,而linear-gradient内的渐变尺寸使用%是相对于背景图的尺寸
  4. linear-gradient内的位置计算是跟角度相关的,如45%,则位置会从左上角开始算起,向右下角移动45%的距离(因此这里的右上角小三角的宽高为 42px 42px(由30/sin(45°)算出))

相关文章:

CSS之实现线性渐变背景

1. background: linear-gradient() background: linear-gradient是CSS中用于创建线性渐变背景的属性&#xff0c;这个属性允许你定义一个在元素的背景中进行渐变的效果&#xff0c;可以从一个颜色过渡到另一个颜色。 基本语法 background: linear-gradient(direction, color-…...

软考 系统架构设计师系列知识点之特定领域软件体系结构DSSA(7)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之特定领域软件体系结构DSSA&#xff08;6&#xff09; 所属章节&#xff1a; 第7章. 系统架构设计基础知识 第5节. 特定领域软件体系结构 相关试题 5. 特定领域软件架构&#xff08;Domain Specific Software Archite…...

CentOS-7网卡重启后关闭的解决方法

第一步查找网卡&#xff1a; ip addr 如下图&#xff1a; 于是发现网卡eth0。 第二步进入网卡配置目录并进行配置&#xff1a; cd /etc/sysconfig/network-scriptsvim ifcfg-eth0 第三步改配置如下图&#xff1a; 然后每次重启后网卡会自动启动。...

Linux CentOS7 用户组管理

Linux操作系统基于多用户的设计理念&#xff0c;允许多个用户同时使用系统资源。用户是登录系统并使用系统资源的个体&#xff0c;其都有自己的账户和密码。用户组是将众多用户归类为一组。Linux中的用户和用户组是系统安全和权限管理的基础。本文将探讨Linux中用户组的创建和管…...

C++算法:前缀和基础

相关 源码测试用例下载 https://download.csdn.net/download/he_zhidan/88430716 包括4个压缩包&#xff0c;初始代码&#xff0c;实现前缀和&#xff0c;实现前缀积&#xff0c;实现前缀异或。都是在前者的基础上修改的。 本博文是CSDN学院课程的讲义 https://edu.csdn.net/c…...

vue和react的区别

目录 1. 数据绑定 Vue React 2. 组件化 Vue React 3. 学习曲线 4. 状态管理 Vue React 5. 社区和生态系统 3. 学习曲线 4. 状态管理 Vue React 5. 生态系统 6. 社区和支持 7. 性能 8. 生产环境性能 9.语法和模板: 结论 当涉及到前端开发框架时&#xff0c…...

STM32 之 HAL 库串口 USART 丢数据及ORE卡死的解决方案

STM32 之 HAL 库串口 USART 丢数据及ORE卡死的解决方案_hal_uart_error_ore-CSDN博客...

递归最小二乘法RLS

参考&#xff1a;RLS递归最小二乘法(Recursive Least Squares)_hymwgk的博客-CSDN博客...

Apache Doris (三十九):Doris数据导出 - MySQL dump导出

🏡 个人主页:IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主:加入大数据技术讨论群聊,获取更多大数据资料。 🔔 博主个人B栈地址:豹哥教你大数据的个人空间-豹哥教你大数据个人主页-哔哩哔哩视频 目录...

【Nginx32】Nginx学习:随机索引、真实IP处理与来源处理模块

Nginx学习&#xff1a;随机索引、真实IP处理与来源处理模块 完成了代理这个大模块的学习&#xff0c;我们继续其它 Nginx 中 HTTP 相关的模块学习。今天的内容都比较简单&#xff0c;不过最后的来源处理非常有用&#xff0c;可以帮我们解决外链问题。另外两个其实大家了解一下就…...

vue3后台管理框架之集成sass

我们目前在组件内部已经可以使用scss样式,因为在配置styleLint工具的时候,项目当中已经安装过sass sass-loader,因此我们再组件内可以使用scss语法!!!需要加上lang="scss" <style scoped lang="scss"></style> 接下来我们为项目添加一些…...

无需付费开会员,一个Python程序实现PDF转高清图片

今天需要将一个PDF导出为图片&#xff0c;但是一般的在线转换网站导出的图片清晰度都不高&#xff0c;分辨率只有1241*1754&#xff0c;这就导致输出的图片放大后字体是有点模糊的&#xff0c;所以就想到了使用Python中的PyPDF2库来处理PDF文件&#xff0c;以及Pillow库来处理图…...

为分布式系统设计数据库

【squids.cn】 全网zui低价RDS&#xff0c;免费的迁移工具DBMotion、数据库备份工具DBTwin、SQL开发工具等 数据库设计是微服务和云原生解决方案的关键因素&#xff0c;因为基于微服务的架构导致了数据的分布式。数据管理不再在一个单一的过程中发生&#xff0c;而是可以通过多…...

Programming abstractions in C阅读笔记:p179-p180

《Programming Abstractions In C》学习第60天&#xff0c;p179-p180总结。 一、技术总结 1.palindrome(回文) (1)包含单个字符的字符串(如"a")&#xff0c;或者空字符串(如" ")也是回文。 (2)示例&#xff1a;“level”、“noon”。 2.predicate fun…...

在 VSCode 中使用 PlantUML

最近&#xff0c;因为工作需要绘制一些逻辑图&#xff0c;我自己现在使用的是 PlantUML 或者 mermaid&#xff0c;相比之下前者更加强大。不过它的环境也麻烦一些&#xff0c;mermaid 在一些软件上已经内置了。但是 PlantUML 一般需要自己本地安装或者使用远程服务器&#xff0…...

css3过渡属性属性名:transition

CSS3的过渡属性属性名是transition&#xff0c;它允许我们在状态改变时为元素添加过渡效果&#xff0c;例如在元素从一种样式变为另一种样式时添加平滑的过渡效果。 transition的语法如下&#xff1a; transition: property duration timing-function delay;其中&#xff0c;…...

关于数据链路层(初步)

以太网帧格式&#xff1a; 源地址和目的地址是指网卡的硬件地址&#xff08;也叫MAC地址&#xff09;&#xff0c;长度是48位&#xff0c;是在网卡出厂时固 化的&#xff1b; 帧协议类型字段有三种值&#xff0c;分别对应载荷的形式&#xff0c;有IP、ARP、RARP&#xff1b; …...

诊断DLL——CAPL_DLL集成安全访问算法

文章目录 前言一、CAPL DLL简介DLL生成C2338报错解决方案:二、添加27服务解锁算法三、CAPL调用dll前言 在实际诊断工程应用中,如UDS刷写——27服务,经常会遇到一些Seed2Key的算法问题,为了安全保密,这个算法的源码不便公开,我们可以将其打包成DLL,然后在CANoe诊断控制面…...

集合元素处理(传统方式和Stream方式)

1、集合元素处理&#xff08;传统方式&#xff09; 现在有两个ArrayList集合存储队伍当中的多个成员姓名&#xff0c;要求使用传统的for循环&#xff08;或增强for循环&#xff09;依次进行一下若干操作步骤&#xff1a; 第一个队伍只要 名字为 3 个字 的成员姓名&#xff1b;存…...

亲测好用,这3款免费高清录屏软件,效果惊人!

在当今社会上&#xff0c;录屏软件已经成为了人们日常生活中不可或缺的一部分。无论是在工作还是学习中&#xff0c;我们都需要使用录屏软件来录制屏幕上的内容。然而&#xff0c;许多录屏软件都是收费的&#xff0c;这对于那些想要尝试录屏软件但又不想花钱的人来说&#xff0…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...