CSS3中的 Background linear gradient()用法

本文参考自css only muti-color background如有兴趣的同学可以去看看这篇文章

这篇文章主要通过几个例子看看linear-gradient()的具体用法对linear-gradient的基础知识不做过多的介绍如有兴趣的同学可以出门左拐到mdn查看具体用法。ok话不多说让我们来看看awesome linear-gradient。

首先是一般的渐变

div{background:linear-greadient(70deg,#0f0 0%, 00f 100%);
}
复制代码

比较简单不做过多的解释

颜色块渐变

  div{ background:linear-gradient(30deg,#00d 60%,#0aa 60%);
}
复制代码

这里有一个地方需要我们注意的就是两个渐变的颜色位置要在同一位置，或者后一个渐变的位置小于前一个渐变的位置。至于原因很简单，想象一下前后两个渐变分别为两张纸，前一个渐变在上，后一个渐变在下，此时只要后一个渐变位置在前一个的前面那么前一个渐变就能将后一个渐变的一部分遮盖住，从而看起来是两个渐变有个明显的边界，如果后一个渐变位置比前一个要靠后那么此时两个渐变之间就有了空隙，只要有了空袭则两边的颜色要网中间填充就会形成渐变过度，也就不能实现我们效果图上面的这种边界明显的色块效果了。

如下图所示

位置重叠位置相交位置相离

多个色块

div{background: -webkit-linear-gradient(110deg, #000 33%, rgba(0,0,0,0) 33%), -webkit-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
}复制代码

这里为了达到效果运用了在同一个北京中运用了两个线性渐变，这里我们需要注意的是，第一个线性渐变我们使用了rgba(0,0,0,0)定义了一个全透明的颜色，目的是为了让后一个渐变的颜色显现出来不会被第一个颜色所遮挡。

在渐变后定义背景颜色

  #div3{background:linear-gradient(-110deg,#a0a 30%,rgba(0,0,0,0) 30%),url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');background-size:cover;background-position:top left;
}
复制代码

此处我们要将希望显现出背景色的区域颜色定义为透明色。而且一定不能忘了设置bakckground-size为cover，否则的话背景无法显现。根据MDN上面的解释是因为浏览器渲染的问题。

弧型渐变

#div4{background: linear-gradient(110deg, #260af8 40%, rgba(0, 0, 0, 0.1) 40%), radial-gradient(farthest-corner at 0% 0%, #7a00cc 60%, #c03fff 60%);
复制代码

没什么好说的这个东东，主要运用了radial-grediant也就是径向渐变。

多个色块不懂角度渐变这个跟第三个原理一样只不过是需要改变一下角度值。

CSS3中的 Background linear gradient()用法相关推荐

理解CSS3中的background－size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性给图片设置固定的宽度和高度的固定宽度400px和高度200px-使用ba ...
CSS3中惊艳的gradient
以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...
Css3中hover伪类的用法
在css3中,hover伪类是鼠标移到元素上时,会为此元素添加特殊的样式的方法,还可以为其他元素添加特殊的样式. 内部代码详情,见截图: 以及输出截图: 在截图中我们可以看到,当我把鼠标移入类denl ...
html5+css3中的background: -moz-linear-gradient 用法
http://hi.baidu.com/zyyhyzazwm/item/72dc6c9a40513acf1a49df56 在CSS中background: -moz-linear-gradient 让 ...
HTML背景渐变圆圈,背景渐变：html5+css3中的background: -moz-linear-gradient 用
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. 背景使用CSS渐变显示可以不使用图像就实现两 ...
css3中的background
对background的两种运用:一是background中的线性渐变,background: linear-gradient(to bottom,#0e7bef,#0d73da);这个是对背景颜色从 ...
css3 中background的新增加的属性的用法(一)
关于background属性用法,相信许多重构人员都很熟悉了,在css3中,background属性依然保持以前的用法,不过可以允许在该属性中添加多个背景图像组,背景图像之间通过逗号进行分隔.增加了4 ...
css面包屑导航_在CSS3中编写优美的面包屑导航菜单
本文是我们的" HTML5 / CSS3教程系列"的一部分 -致力于帮助您成为更好的设计师和/或开发人员. 单击此处查看同一系列的更多文章. 导航菜单和链接可能是Web布局中最重要 ...
CSS3中伪元素::before和::after的经典用法
::before 和 ::after其实就是附着在元素前后的伪元素. 说他是"伪"元素的意思就是,元素不是在DOM中生成的,而是在浏览器渲染引擎渲染CSS的时候添加上去的. 如果百 ...

CSS3中的 Background linear gradient()用法

CSS3中的 Background linear gradient()用法相关推荐

最新文章

热门文章