【背景渐变】 —— 就算没接触过也能 一遍学会哦

news2025/7/19 11:26:04

前期回顾

​回顾  前期  

把你喜欢css动画嵌入到浏览器中 —— css动画 项目_0.活在风浪里的博客-CSDN博客常用酷炫动画999+合集,代码直接复制可用,总用你想找的,快来抱走吧,三连,停!听鹅说,下次一定、下次一定……https://blog.csdn.net/m0_57904695/article/details/127846345?spm=1001.2014.3001.5501https://blog.csdn.net/m0_57904695/article/details/127846345?spm=1001.2014.3001.5501

听鹅说,别急!这个不难很简单,一遍过,一遍懂,我也算是复习下,直接开始,无废话版


目录

线性渐变默认上到下

 如果加浏览器前缀不能加 to 

 颜色后可以设置大小比例

 方位可以是度数

 重复渐变

重复多层渐变

 径向渐变(由其中心定义)

 默认(椭圆 内向外)

圆形 

设置径向渐变的中心点

多背景图片

 结语:


线性渐变默认上到下

to 控制方向 从左到右 红到蓝

background-image: linear-gradient(to left, red,blue);

 如果加浏览器前缀不能加 to 

 background-image: -webkit-linear-gradient(left, red,blue);

 颜色后可以设置大小比例

        /* 与单个方位值不同 可以理解为 到右下 */

        /* 技巧:方位对应最后的值 ==》 右下是蓝 */

        /* 颜色后可以跟大小比例 ==》 从开始到10%是红色,从10%到最后是蓝色*/

        background-image: linear-gradient(to right bottom, red 10%, blue 10%);

background-image: linear-gradient(blue 50%, blue 50%, black 55%, red 55%);

 

    /* 根据头方位对尾值得出左上对应粉色 0-33.33%=蓝色,33.33%-66.66%=绿色,66.66%后=粉色 */
 background-image: linear-gradient(to left top, blue 33.33%, green 33.33%, green 66.66%, pink 66.66%);

/* 根据头方位对尾值得出左上对应粉色 0-33.33%=蓝色,33.33%-66.66%=蓝色渐变为绿色,66.66%后=粉色 */
background-image: linear-gradient(to left top, blue 33.33%, blue 33.33%, green 66.66%, pink 66.66%);

 方位可以是度数

 background-image: linear-gradient(45deg,blue 33.33% ,green 33.33%,green 66.66%,pink 66.66%);

 

 重复渐变

background-image: repeating-linear-gradient(to right, blue 10% , red 20% );

 

重复多层渐变

        /* 0-10=黑 10-20=白 重复 */

background-image: repeating-linear-gradient(-45deg, #000, #000 10px, #fff 10px, #fff 20px);

background-image: repeating-linear-gradient(to right, rgba(0, 0, 255, 0.096) 50%, rgba(0, 128, 0, 0.378) 60%), repeating-linear-gradient(red 40%, pink 60%);

 径向渐变(由其中心定义)

径向渐变就是沿着圆周或者椭圆周向外扩散的渐变。有一种水波扩散的感觉。

我们通过 radial-gradient();来定义一个径向的渐变。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

shape 为椭圆形,size 为最远角,position 为中心。

shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse(椭圆)。

size 参数定义渐变的大小。它可接受四个值:

closest-side :从中心点向外扩展渐变,到离中心点最近的一边结束。
farthest-side :以离渐变中心点最远的那一边计算圆的半径
closest-corner :以离渐变中心点最近的元素顶角计算渐变的范围。
farthest-corner :以离渐变中心点最远的顶角计算圆的半径。

 默认(椭圆 内向外)

background-image: radial-gradient(red, #000);

圆形 

background-image: radial-gradient(circle, red , yellow , green);

设置径向渐变的中心点


用关键字 at 后面加上 position 属性支持的定位关键字和数值,指定渐变中心的位置。

background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);

多背景图片

/* 多个背景图css背景色会失效,在最后一个背景图url后 是否平铺前 加颜色就好#ccc   位置后紧跟斜杠图片大小 */
/* 组合写用background :url() 是否平铺 水平 多少px  垂直 多少px/图片大小宽高,url() 背景色 是否平铺 水平方向 多少px 垂直方向/图片大小 宽高*/
background: url('https://img2.baidu.com/it/u=360501637,2066136816&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=423') no-repeat left 15px center/150px 150px, url('https://img0.baidu.com/it/u=2515019553,1565721177&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=443')#ccc no-repeat right 15px center/150px 150px;

 结语:

祝大家bug一个接一个。。。。的消灭掉

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

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

相关文章

2009年408大题总结

2009年408大题第41题第42题第43题第44题第45题第46题第47题第41题 这个最容易想到的方法就是举反例,但是我们可以分析一下,每一次都取最短的路径,实际上就是贪心策略的应用——每次都是最优,但是最终的结果却一般不是最优&#xf…

第十一节:抽象类和接口【java】

目录 🥇1. 抽象类 📘1.1 抽象类概念 📒1.2 抽象类语法 📗 1.3 抽象类特性 🏹2. 接口 📙2.1 接口的概念 📕2.2 语法规则 📒2.3 接口使用 🔎2.3.1USB接口例子 &a…

【Google Colab】使用手册、教程;使用 Google Colab 免费使用 python 服务器

Colaboratory 是一个 Google 研究项目,旨在帮助传播机器学习培训和研究成果。它是一个 Jupyter 笔记本环境,不需要进行任何设置就可以使用,并且完全在云端运行。Colaboratory 笔记本存储在 Google 云端硬盘中,并且可以共享&#x…

超详细图解kafka生产消费流程

目录: 一条消息在kafka是如何生产的? 一条消息在kafka是如何存储的? 一条消息在kafka是如何消费的? Kafka为什么高性能? Kafka为什么高可用? 一.一条消息在kafka是如何存储的? …

【前端】Vue+Element UI案例:通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由

文章目录目标代码0.动态地显示菜单:store1.动态注册路由2.解决刷新后摆平问题总代码本篇修改的代码文件tab.js参考视频: VUE项目,VUE项目实战,vue后台管理系统,前端面试,前端面试项目案例链接【前端】VueEl…

spring-IOC理论推导P3

1.新建一个项目。名字叫做spring-study 2.导包 <dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>5.3.23</version></dependency></dependencies&…

solr-7.7.3 搭建

solr-7.7.3 搭建 solr-7.7.3 搭建 文章目录solr-7.7.3 搭建一、前期准备安裝规划(一)资料下载(二)上传文件二、安裝(一)创建新用户(二)安装solr1.solr安装包解压到/opt/module2.将解压文件名修改为solr3.修改配置文件(三)分发文件&#xff08;四&#xff09;开启solr&#xff…

YOLOv5量化调优

目录 一、背景 二、模型调优 2.1 基准选取 2.1.1 官方精度数据 2.1.2 fp32bmodel的精度 2.1.3 int8bmodel精度数据 2.2 多图量化 2.3 预处理对齐&lmdb 2.4 网络图优化 2.4.1 per_channel优化 2.4.2 accuracy_opt优化 2.4.3 conv_group优化 2.4.4 总结 2.5 混…

python中使用xlrd、xlwt操作excel表格详解

最近遇到一个情景&#xff0c;就是定期生成并发送服务器使用情况报表&#xff0c;按照不同维度统计&#xff0c;涉及python对excel的操作&#xff0c;上网搜罗了一番&#xff0c;大多大同小异&#xff0c;而且不太能满足需求&#xff0c;不过经过一番对源码的"研究"&…

移动电源出口美国和欧盟需要做什么?

手机的普遍使用也带动了充电宝的发展&#xff0c;现在是智能的时代&#xff0c;手机现在是我们每个人永远不会忘记带的东西&#xff0c;当然耗电量也是很大的。所以充电宝在这时就有很大的用处了。移动电源是一种集供电和充电功能于一体的便携式充电器&#xff0c;一般由锂离子…

杰理的蓝牙芯片的key是什么?以及该如何添加key?杰理key文件原理

目录 一、简介 关于杰理芯片的key文件&#xff0c;实际上 杰理芯片特有的一种机制&#xff0c;而这种机制就是存在于杰理芯片特有的架构&#xff0c;也是杰理公司延续将近10年的特点&#xff0c;估计以后也会是这种机制。具体为什么&#xff0c;请听我娓娓道来&#xff0c;这里…

测试大咖漫谈如何搞定软件质量?

关于质量保障&#xff0c;好像已经说过太多&#xff0c;但这里还是抽象的唠叨几句。 多年的软件测试和质量保障工作让我越来越清晰的认识到&#xff1a;质量绝对不是一个环节&#xff0c;一个工种可以搞定的。比如&#xff1a; 从对语言的误用&#xff0c;到对第三方组件的误用…

第4关: 网页排序——PageRank算法

要求&#xff1a;编写实现网页数据集PageRank算法的程序&#xff0c;对网页数据集进行处理得到网页权重排序。 ####相关知识 ######PageRank算法原理 1.基本思想&#xff1a; 如果网页T存在一个指向网页A的连接&#xff0c;则表明T的所有者认为A比较重要&#xff0c;从而把T的一…

【Shell】入门Shell(基本变量、环境变量、特殊变量)

Shell脚本一、Shell脚本的执行方式1.脚本格式要求2. 编写第一个Shell脚本3.Shell脚本的常用执行方式二、Shell的变量1.Shell变量介绍2. Shell变量的定义a. 基本语法b. 快速入门(三案例)2. Shell变量的定义a. 定义变量的规则b. 将命令的返回值赋给变量三、Shell多行注释1. 用 :&…

成本优化之使用P2P的方案的需要了解的本地SDK的背后的原理

文章目录一. P2P的SDK到底做了什么二. P2P原理1. 同流分享思路2. 目前方案三. 使用P2P后产生的问题1. 有概率出现loading转菊花2. 首次打开速度明显慢于正常的通道1-2秒参考文章一. P2P的SDK到底做了什么 P2P的SDK在我们App启动后其实是开启了一个服务&#xff0c;固定端口去监…

刷题日记【第十一篇】-笔试必刷题【小易的升级之路+找出字符串中第一个只出现一次的字符+微信红包+计算字符串的编辑距离】

1.计算字符串的编辑距离【动态规划编程题】 import java.util.Scanner; import java.io.*;// 注意类名必须为 Main, 不要有任何 package xxx 信息 public class Main {public static void main(String args[]) throws Exception{BufferedReader reader new BufferedReader(n…

【RuoYi-Vue-Plus】扩展笔记 07 - CentOS 7 集成 Prometheus + Grafana 监控初体验

文章目录前言参考目录官方文档博客参考相关书目操作步骤1、Prometheus1.1、安装 Prometheus1.2、配置 Prometheus1.3、访问控制台2、Grafana2.1、安装 Grafana2.2、访问控制台3、Grafana 大屏配置3.1、添加 Prometheus 数据源3.2、导入 dashboards 仪表板3.3、配置 node_export…

你安全吗?丨沉默的“复仇”到底是什么东西?

作者&#xff1a;黑蛋 在电视剧《你安全吗&#xff1f;》第七集中&#xff0c;因为周游的死缠烂打&#xff0c;秦淮第一次提起了他和陈默以前的事情&#xff0c;也给出了之前虎迫公司开除陈默的原因&#xff1a;陈默妈妈被诈骗团伙骗掉所有积蓄&#xff0c;又因为此事走神出了…

【附源码】计算机毕业设计JAVA计算机专业在线学习评估软件-演示录像-

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis Maven Vue 等等组成&#xff0c;B/…

Java抽象类

什么是抽象类&#xff1f; 如果一个类不能够表示一个准确的对象&#xff0c;则使用abstract修饰&#xff0c;表示为抽象类&#xff0c;抽象类就是为了被继承。抽象类使用abstract修饰 abstract class Animal {abstract public void eat(); }抽象类不能被实例化 public static …