CSS3通过Gradients实现渐变背景色

使用背景色渐变可以使得页面质感得到大幅度提升,CSS样式中通过gradients属性指定两个或多个颜色之间平滑过渡,由于颜色的渐变是由浏览器生成,因此不会出现不同分辨率下失真的情况。

所属分类 WEB

相关标签 CSS渐变

为什么要使用渐变色

当今越来越注重UI交互的互联网时代,用户体验越来越被重视。

网页设计中,使用渐变得设计效果不仅仅可以达到醒目的效果,同时可以增强网页的质感。

如下图按钮的对比:

/static/upload/post/1645053284471.jpg

渐变背景实现

CSS3中可以通过渐变(gradients属性)实现两个或多个指定的颜色之间平滑过渡。

CSS3以前,你需要通过配置一个渐变得背景图像来实现这些效果。

使用渐变效果的元素在放大时看起来效果不会有任何失真,因为渐变(gradient)是由浏览器生成的。

最重要的是,如果需要调整背景效果可以直接修改CSS样式,而不是更改图片那样麻烦。

gradients属性

gradients属性有两种主要的配置:

  • linear-gradient(线性渐变):向下/向上/向左/向右/对角方向(可以指定角度)
  • radial-gradient(径向渐变):由中心向周围

拓展属性:

  • repeating-linear-gradient:重复的线性渐变
  • repeating-radial-gradient:重复的径向渐变

gradients语法

/*gradients可以配置在background-image也可以配置在background*/
/*background: linear-gradient(direction, color1, color2, ...);*/
/*一般推荐配置在background-image,当有多个样式重叠,默认覆盖background*/
background-image: linear-gradient(direction/angle, color1, color2, ...);
  • direction/angle:选用,可以是关键词,也可以是角度
  • color:支持快捷色(如:red)、16进制色号、RGB和RGBA(透明色)
/*默认自上向下的渐变*/
background-image: linear-gradient(red , yellow);
/*配置自左向右的渐变*/
background-image: linear-gradient(to right, red , yellow);
/*配置对角线渐变*/
background-image: linear-gradient(to bottom right, red, yellow,blue);
/*配置角度的渐变色*/
/*角度范围:-90到90*/
background-image: linear-gradient(45deg, red, yellow);
/*配置一个彩虹渐变*/
/*理论上来说可以支持无限个颜色*/
background-image: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
/*透明渐变色,制作一个透明渐变遮罩*/
background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8));
/*控制颜色显示的范围*/
/*这里颜色的百分比之和不规定是100%*/
background-image: linear-gradient(red 5%, yellow 5%, green 20%,blue 70%);
/*如果颜色范围超出100%,表示颜色产生重叠,重叠部分可能会失去渐变过渡*/
/*直接是两种颜色分割的效果,类似:斑马线*/
background-image: linear-gradient(red 15%, yellow 15%, green 30%,blue 90%);
/*可以只配置某些具体的颜色范围*/
background-image: linear-gradient(red , yellow 15%, green 20%,blue);

linear-gradient的所有语法都适用于radial-gradient。

但radial-gradient有一个特定的语法用于定义中心点的位置。

  • cover:覆盖
  • contain:包含
  • closest-side:最近端
  • farthest-side:最远的端
  • closest-corner:最近的角
  • farthest-corner:最远的角落
/*通过调整%自由修改径向渐变得中心点位置*/
background-image: radial-gradient(closest-side at 50% 50%, red, yellow);

米虫

做一个有理想的米虫,伪全栈程序猿,乐观主义者,坚信一切都是最好的安排!

本站由个人原创、收集或整理,如涉及侵权请联系删除

本站内容支持转发,希望贵方携带转载信息和原文链接

本站具有时效性,不提供有效、可用和准确等相关保证

本站不提供免费技术支持,暂不推荐您使用案例商业化

发表观点

提示

昵称

邮箱

QQ

网址

当前还没有观点发布,欢迎您留下足迹!

同类其他

WEB

nvm管理node.js和npm多版本切换

在业务中我们会出现不同的项目依赖与不同版本的 node.js,总不能每次跑项目的时候都去重新安装对应版本的 node.js 和依赖,使用 nvm 可以让多个版本的 node.js 共存,并提供管理和切换

Jquery中bind()、live()、delegate()和on()的区别

自Jquery1.7起,on()方法是 bind()、live()、delegate() 方法的新的替代品,我们推荐使用on()来处理业务中的事件绑定,通过理解这些方法的差异能够更加清晰明白使用on()方法的优势所在

Jquery.bind()实现前端字段公共校验器

严谨的页面开发需要着重关注前台校验相关的内容,确保请求参数的合法以保证服务器安全,界面参数众多需要建立一个公共方法,公共校验器的核心方法是Jquery.bind()

Jquery+CSS轻松实现导航动态显示隐藏

绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法,可以轻松实现下滑隐藏,上滑显示的效果

前端JS对字段编码预防XSS攻击

跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码

SVGInject插件动态加载SVG并自定义样式

HTML 中加载 SVG 有很多种方式,但如果需要在 HTML 中通过 CSS 样式自由控制 SVG 样式就必须将 svg 标签插入网页找那个成为 DOM 的一部分,本文借助 SVGInject 插件可以快速完成这一操作

选择个人头像

昵称

邮箱

QQ

网址

评论提示

  • 头像:系统为您提供了12个头像自由选择,初次打开随机为你选择一个
  • 邮箱:可选提交邮箱,该信息不会外泄,或将上线管理员回复邮件通知
  • 网址:可选提交网址,评论区该地址将以外链的形式展示在您的昵称上
  • 记忆:浏览器将记忆您已选择或填写过得信息,下次评论无需重复输入
  • 审核:提供一个和谐友善的评论环境,本站所有评论需要经过人工审核