如何利用 CSS 渐变实现多样化背景效果

embedded/2024/12/22 14:50:19/

前言

总在平常看到像这样的图片 背景是如何实现的呢 背景效果的多样性和美观性直接影响用户体验。CSS 渐变为设计师提供了一种强大且灵活的方法来创建引人注目的背景。渐变是颜色之间平滑过渡的效果,通过调整渐变类型和设置,你可以轻松实现从简单到复杂的各种背景效果。
请添加图片描述
请添加图片描述

在日常开发中 有很多需要用到渐变的地方,这片文章来总结一下
来看MDN是如何说的
CSS 渐变由 [<gradient>] 数据类型表示,它是 [<image>] 的一种特殊类型,由两种或多种颜色之间的渐变过渡构成。

一共有三种类型的渐变

线性渐变:linear-gradient()创建

线性渐变 是最常见的一种渐变方式,它沿着指定的轴线从一种颜色过渡到另一种颜色。你可以控制渐变的方向、颜色停留点和渐变的角度,创造出各种效果,例如从左到右、从上到下或对角线方向的渐变。

html" title=css>css">* 渐变轴为 45 度,从蓝色渐变到红色 */linear-gradient(45deg, blue, red);* 渐变轴为 45 度,从蓝色渐变到透明*/
linear-gradient(45deg,blue,transparent)
linear-gradient(45deg,blue,rgba(0,0,0,0))/* 从右下到左上、从蓝色渐变到红色 */linear-gradient(to left top, blue, red);
/*  蓝色渐变到红色再渐变到黄色 */
linear-gradient(to left top, blue, red,yellow);/* 色标:从下到上,从蓝色开始渐变,到高度 40% 位置是绿色渐变开始,最后以红色结束 */linear-gradient(0deg, blue, green 40%, red);/* 色标:从下到上,从蓝色开始渐变,到高度 200px 位置是绿色渐变开始,最后以红色结束 */linear-gradient(0deg, blue, green 200px, red);  /* 颜色提示:从左到右的渐变,由红色开始,沿着渐变长度到 10% 的位置,然后在剩余的 90% 长度中变成蓝色 */linear-gradient(.25turn, red, 10%, blue);/* 多位置色标:45% 倾斜的渐变,左下半部分为红色,右下半部分为蓝色,中间有一条硬线,在这里渐变由红色转变为蓝色 */linear-gradient(45deg, red 0 50%, blue 50% 100%);
径向渐变:radial-gradient()创建

径向渐变 从一个中心点向外扩展,逐渐过渡到其他颜色。你可以设置渐变的形状、大小以及中心点的位置,来实现从中心向外的渐变效果,这种效果常用于创建深度感和立体感。

html" title=css>css">/* 在容器中心的渐变,从红色开始,变成蓝色,最后变成绿色 */
radial-gradient(circle at center, red 0, blue, green 100%)
/*65% 300px: 这是渐变的尺寸和位置设置。65% 表示渐变的形状或大小,通常是相对于容器的宽度或高度的百分比。在这个例子中,它表示渐变的结束点距离渐变中心 65% 的位置。300px 指渐变的半径,即从中心点到渐变的边缘的距离。at right top: 这是渐变的起始位置。right top 表示渐变的中心点位于容器的右上角。 */radial-gradient(60% 100px at left top, red 0, blue, green 100%) 
锥形渐变:conic-gradient()创建

没怎么使用过 本文不做展开

B站渐进色背景实现
请添加图片描述

html"><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html" title=css>css">.layout{width:100vw;min-height:100vh;background:linear-gradient(to bottom,transparent -100px, #fff 300px),linear-gradient(to right ,#D2EEF9,#FFD1DE);}</style></head><body><div class="layout"></div></body></html>

boss直聘渐变色
请添加图片描述

html"><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">![请添加图片描述](https://i-blog.csdnimg.cn/direct/ded9580041234733bfbbc569bcbf3ec1.png)<meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html" title=css>css">.layout{width:100vw;min-height:100vh;background:linear-gradient(to bottom,transparent, #fff 300px),radial-gradient(90% 300px at left top, #95E0DC, transparent),radial-gradient(65% 300px at right top, #D3CBFC, transparent);}</style></head><body><div class="layout"></div></body></html>

本文到此结束 更多作为自我学习 也希望对你有所帮助 会持续更新代码文章 点个赞吧


http://www.ppmy.cn/embedded/111626.html

相关文章

Javascript 如何检查两个给定的线段是否相交(How to check if two given line segments intersect)

给定两条线段(p1, q1)和(p2, q2)&#xff0c;判断给定的线段是否相交。 在讨论解决方案之前&#xff0c;让我们先定义方向的概念。平面中有序点三元组的方向可以是 –逆时针 –顺时针 –共线 下图显示了&#xff08;a&#xff0c;b&#xff0c;c&#xff09; 的不同可能方…

[杂项]pugi::xml获取xml中的注释节点

前言 想到学习xml时的一句话&#xff0c;xml中注释也会被算作一个节点。那么我们就可以通过 pugixml 把注释节点获取出来&#xff0c; <?xml version"1.0"?> <mesh name"mesh_root"><!--这是一个注释节点-->some text<![CDATA[so…

新书速览|JavaScript前端开发与实例教程(微课视频版)(第2版)

《JavaScript前端开发与实例教程&#xff08;微课视频版&#xff09;&#xff08;第2版&#xff09;》 本书内容 JavaScript是开发Web前端必须掌握的编程语言&#xff0c;《JavaScript前端开发案例教程&#xff1a;微课视频版》以真实的项目需求为导向&#xff0c;循序渐进、深…

TestCraft - GPT支持的测试想法生成器和自动化测试生成器

在当今快速变化的软件开发世界中&#xff0c;自动化测试已成为确保软件质量的关键环节。而随着AI技术的进步&#xff0c;越来越多的工具开始引入人工智能&#xff0c;来辅助生成测试用例和自动化测试脚本。其中&#xff0c;TestCraft&#xff0c;作为一款GPT支持的测试想法生成…

19. 删除链表的倒数第 N 个结点【 力扣(LeetCode) 】

零、LeetCode 原题 19. 删除链表的倒数第 N 个结点 一、题目描述 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 进阶&#xff1a;你能尝试使用一趟扫描实现吗&#xff1f; 二、测试用例 示例 1&#xff1a; 输入&#xff1a;hea…

工作地址和工具连接

1&#xff1a;原型图的作画 &#x1f389; 原型操作指南 (modao.cc)墨刀 - 个人空间 (modao.cc) ProcessOn - 我的文件 Axure

appium server gui详细按照步骤

1.安装appium server desktop Appium安装提供两种方式:桌面版和命令行版。其中桌面版又分为 Appium GuI 和 Appium Desktop 。作为初学者&#xff0c;用桌面版&#xff0c;对初学者比较友好。 官网下载地址&#xff1a;Releases appium/appium-desktop GitHubTags appium/…

Nginx 学习笔记

Nginx 简介 Nginx 是一个高性能的 HTTP 和反向代理服务器&#xff0c;特点是占有内存少和并发能力强。 Nginx 可以作为静态页面的 Web 服务器&#xff0c;同时还支持 CGI 协议的动态语言&#xff0c;比如 perl&#xff0c;php 等。但不支持 Java。Java 程序只能通过和tomcat配…