p:nth-child(1){background-image:url(../images/position.png);} p:nth-child(2){background:url(../images/position.png) -100px 0px;} p:nth-child(3){background:url(../images/position.png) -200px 0px;} p:nth-child(4){background:url(../images/position.png) 0px -100px;} p:n...
#01. CSS 线性渐变linear-gradient 请注意即使是通过渐变生成的背景,其本质还是属于背景图片而不是背景颜色,本文中采用的简写背景属性background: linear-gradient是(正确)background-image: linear-gradient 简写,而非(错误)background-color: linear-gradient #02. 颜色,位置 linear-gradient(red 0 20%, blue 80%...
线性渐变(linear gradients)沿着一根轴线改变颜色,从起点到终点颜色进行顺序渐变。 语法: background:linear-gradient(direction,color-stop1,color-stop2,……); 1、线性渐变从上到下(默认) 语法 background:li
background: linear-gradient(direction,color-stop1,color-stop2,...); direction:用角度值指定渐变的方向(或角度); color-stop1,color-stop2,...:用于指定渐变的起止颜色 ps:至少需要两种颜色 background: -webkit-linear-gradient(red,yellow,blue);background: -o-linear-gradient(red,yellow,blue);backgr...
首先,让我们来了解一下“linear-gradient”的基本用法: 说明:用线性渐变创建图像 语法: <linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) <side-or-corner> = [left | right] || [top | bottom] ...
color-stop1,color-stop2,...:用于指定渐变的起止颜色 ps:至少需要两种颜色 代码语言:javascript 复制 background:-webkit-linear-gradient(red,yellow,blue);background:-o-linear-gradient(red,yellow,blue);background:-moz-linear-gradient(red,yellow,blue);background:linear-gradient(red,yellow,blue); ...
<color-stop>:<color>[<length>|<percentage>]? 渐变夹角为元素中心点垂直线与渐变线之间形成的夹角 线性渐变是通过轴线定义的 线性渐变 默认从上往下 (to bottom)示例: 示例 code 角度值与方向值的转换: 示例 关于渐变中的百分比: background: linear-gradient(green, red) ...
很直观的能看到，linear-gradient是background-image属性的值，而颜色是background-color ...
background-image:linear-gradient(direction,color-stop1,color-stop2,...); 值描述 direction用角度值指定渐变的方向(或角度)。 color-stop1, color-stop2,...用于指定渐变的起止颜色。 更多实例 实例 以下实例演示了从左侧开始的线性渐变,从红色开始,转为黄色: ...
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性，目前火狐3.6以上版本和google浏览器支持这个属性。background: -moz-linear-gradient(top, #bccfe3 0%, #d2dded 100%); 适合 FF3.6+ background: -webkit- gradient(linear, left top, left bottom, color-stop(0%,#bccfe3...