马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 网站制作 > css教程 > 如何通过CSS3实现背景图片色彩的梯度渐变

如何通过CSS3实现背景图片色彩的梯度渐变

时间:2014-05-02   文章来源:马海祥博客   访问次数:

随着网站的越来越普及,CSS3和HTML5必将成为网站前端发展的主流方向,特别是在移动端,高端浏览器给前端工程师们带来了无以言表的体验。

通俗的来讲,CSS3可以说是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括:盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。那么,今天我首先要在马海祥博客上跟大家分享的就是CSS3的Gradients(梯度渐变)。

如何通过CSS3实现背景图片色彩的梯度渐变-马海祥博客

首先我们先来看下新的梯度渐变语法,新的语法包含四个渐变函数:

linear-gradient()
  radial-gradient()
  repeating-linear-gradient()
  repeating-radial-gradient()

这些函数名无需过多的解释,我之后会在马海祥博客上谈到更多关于循环渐变。

因为规范仍是初稿阶段,所以我们在这些渐变函数前加以-webkit-前缀。当以后规范不再是初稿阶段,我们将能够不加前缀而使用他们。

1、Linear Gradients(线性梯度渐变)

为元素盒模型填充线性渐变是最常用的。你只需要考虑渐变从哪个方向开始。据马海祥了解有两种方式可以去指定它。

第一种,你可以指定渐变从哪个方向或角落开始:

 

linear-gradient(left, white, black)

 

linear-gradient(top right, white, black)

你甚至可以省略第一个参数,他将默认为top并给出一个垂直渐变。

第二种,你可以指定渐变的角度:

 

linear-gradient(135deg, white, black)

角度按逆时针方向旋转,0度时为从左向右方向。

注意在所有这些情况下,渐变足够大以填满元素盒模型。

2、Radial Gradients(径向梯度渐变)

径向渐变更加复杂,在填充时有更多的选项。

马海祥觉得最简单的形式是以元素盒模型中心为渐变起始,向外填充至每个角落:

 

radial-gradient(white, black)

这相当于 radial-gradient(center, ellipse cover, white, black)。

第一个参数为可选,默认为 center ,也可以是一个点(就像 background-position ),他允许你将原点放置到其它地方:

 

radial-gradient(10% 30%, white, black)

原点位置后面的参数用来指定渐变的形状和大小,这是两种方式之一。

这种方式用一些关键词来描述形状(circle,ellipse)和大小(closest-side,closest-corner,farthest-side,farthest-corner,contain,cover)例如:

 

radial-gradient(30% 30%, closest-corner, white, black)

 

radial-gradient(30% 30%, circle closest-corner, white, black)

如果你愿意,你还可以分别指定径向渐变的水平与垂直结束半径:

 

radial-gradient(center, 5em 40px, white, black)

3、Repeating Gradients(重复梯度渐变)

循环渐变 repeating-linear-gradient()和repeating-radial-gradient()

拥有完全相同的简写语法,且整个渐变将被循环填充:

 

repeating-linear-gradient(left, red 10%, blue 30%)

这些停靠点将被循环用于调整他们首尾相连,这常常会导致颜色之间过渡强烈。

你可以避免循环末尾的颜色:

 

repeating-radial-gradient(top left, circle, red, blue 10%, red 20%)

4、Color Stops(色站)

为渐变指定颜色停靠点很容易;最简单的情况下,你只需要提供一个颜色列表:

 

linear-gradient(left, red, green, blue)

这样会使所有的颜色平均分布于渐变之上。

如果你愿意,你还可以为个别颜色定位具体的停靠点,然后让浏览器分配其它剩余的:

 

linear-gradient(bottom left, red 20px, yellow, green, blue 90%)

那些渐变轴线可能是条对角线;那么百分比则相应对角线的长度。

颜色的停靠点相同会使颜色之间过渡强烈:

 

linear-gradient(top left, red, yellow, green 60%, purple 60%, blue)

马海祥博客点评:

其实,css3的这个渐变目前主要是应用在手机前端领域,至于web领域的话,大部分情况下马海祥还是建议大家最好是用背景,用背景的好处就是,你可以让一个不懂代码的一个人来修改那个渐变颜色而不需要你亲自动手,这种情况一般在于做网站皮肤的时候(特别是数量多的时候),可以让设计师直接更改图片而不需要通过你再来弄。

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/css/547.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: CSS3   背景图片   背景色彩   色彩梯度   色彩渐变  

上一篇:清除CSS浮动的方法原理及优缺点评定
下一篇:我们真的需要CSS重置来清除默认样式吗?

您可能还会对以下这些文章感兴趣!

  • 网站CSS代码优化的7个原则

    整理和优化代码不仅是为了你的CSS文件大小,还包括了维护性和可读性,以上的原理并不只是针对CSS,它们还能应用到HTML,Javascript以及其他编程语言,CSS文件不只是为了呈现给你网站的最终用户,上面的原理可以帮助用户体验以及开发者经验,运用这些原则到你未来的项目……【查看全文

    阅读:2598关键词: 网站代码   css代码   css优化   日期:2014-10-10
  • 清除CSS浮动的方法原理及优缺点评定

    今天看到有个博友问如何清除网站页面的CSS浮动?因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及width height属性。而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。 其实解决浮动引起的问题有多种方法,……【查看全文

    阅读:5766关键词: 清除CSS浮动   CSS浮动方法   CSS浮动原理   CSS优缺点   日期:2014-03-16
  • CSS样式表文件的优化方法及技巧

    今天,整理了一些CSS简写技巧,它们其实是CSS最常用的写法,但是太多的人使用Dreamweaver这种所见即所得软件来编写CSS,使得代码过于臃肿。CSS代码优化的最大好处就是能够显着减少CSS文件的大小,其实还有很多其他益处,臃肿而杂乱的CSS样式表会使你遇到问题是难以调试……【查看全文

    阅读:405关键词: css   css优化   日期:2016-10-27
  • 如何命名CSS文件及样式规范更利于SEO优化

    一名专业的SEO(搜索引擎优化)有很多工作要做,其中对代码的优化是一个很关键的步骤,为了更加符合SEO优化的规范,我们就需要按照CSS+DIV的命名规则来建设我们的网站,当然这些CSS文件不用一次性全部新建出来,只需要制作到那个页面的时候再建立即可,但是在初步规划的……【查看全文

    阅读:3655关键词: css文件   css样式   seo优化   css   日期:2014-11-10
  • CSS无图片技术的实现方法有哪些?

    什么是CSS无图片技术?CSS无图片技术就是在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果的技术。如果我们尽可能的使用无图片技术来实现,明显可以提高页面的加载速度……【查看全文

    阅读:1441关键词: CSS技术   无图片技术   CSS方法   日期:2014-02-14
  • background-position的使用方法及详细介绍

    background属性是CSS中最常见的属性之一,它是一个简写属性,其包含background-color、background-image、background-repeat、background-position、background-size……【查看全文

    阅读:162关键词: css   使用方法   日期:2017-03-26
  • CSS常用代码使用技巧大全

    这几天,一直忙于帮公司做新的网站,在设计和修改新模板页面的过程中,需要不停的调试CSS样式,有的部分还需要重新来写。为了便于以后再次使用,我特意将在网页制作过程中常使用的CSS代码的使用技巧整理成文章的形式,在马海祥博客上跟大家分享一下,一是便于以后自己在……【查看全文

    阅读:1784关键词: CSS常用代码   CSS代码   CSS代码大全   CSS使用技巧   日期:2013-10-19
  • 常见的一些CSS基础知识题

    CSS指层叠样式表(Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中,外部样式表通常存储在 CSS 文件……【查看全文

    阅读:241关键词: css知识   css   日期:2018-12-27
  • 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体、颜色、背景、图片等的控制,使网页能够完全依照设计者的想法来显示。CSS可以控制网页的显示,HTML标签中的属性也可以控制其显示,为什么还要有CSS呢?其中一个原因就是:……【查看全文

    阅读:2360关键词: 制作网页   网页制作   css   日期:2015-05-13
  • 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么我们怎么才能利用CSS代码使图片和文字在同一行显示且对齐呢?有些朋友会发现,如果一行内容中有图片有文字……【查看全文

    阅读:29791关键词: css代码   图片   css   日期:2015-05-05
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

百度搜索用户建议专区上线公告 企业网站SEO推广能给企业带来哪些好处?