css3的linear-gradient怎么可以给backgound-image设置
发布网友
发布时间：2022-05-12 19:36
共2个回答
懂视网
时间：2022-05-12 23:57
在这里要感谢一下网站：
w3cplus，W3School ，W3C 等等一些网上的教程啊博客什么的（还有好多就不一一列举了），我算是从这些地方开始接触传说中的CSS3和HTML5，而自己的学习笔记自然也会从中借鉴。
建议：大部分CSS3的属性尚在草案之中，使用的时候最好还是都加上各自浏览器的私有前缀
eg：
{ -webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}今天介绍的是CSS3的渐变 ：linear-gradient
渐变在网页上应该算是很常见的一种效果。但是在CSS3出现之前，渐变效果必须使用图片才能做到。这就会出现问题了，就像之前说的圆角和阴影一样，因为使用了图片，在一定程度上影响网页的性能是肯定的，同时还有网站后期维护和修改的难题。CSS3的渐变诞生很久了，到目前为止，只要是支持该属性的浏览器，除了它们的私有前缀之外，其他写法都是一样的。
在刚开始的时候，在webkit下使用的是：
-webkit-gradient(, [, ]?, [, ]? [, ]*) //老式语法书写规则
而到现在，在webkit下使用的是：
-webkit-linear-gradient( [|| ,]? , [, ]* )//最新书写语法
现在，新式语法与其他浏览器，包括firefox，opera的语法书写统一（现在的opera已经使用了webkit内核）；
其实gradient，分成两种一种是线性渐变（linear-gradient），另一种是径向渐变（radial-gradient）。我们可以将linear-gradient和radial-gradient添加到任何可以接受图片的属性，比如：backgorund-images，list-style-image等等。今天我要介绍的就是标题上的linear-gradient。线性渐变
在我看来渐变的参数变化多端，有点复杂，所以先从简单的开始讲起
linear-gradient最简单的语法：
linear-gradient(起点，开始颜色，结束颜色);
起点表示渐变开始的位置，颜色是从开始颜色渐变到结束颜色。
渐变起点有很多种写法：1、使用top，right，bottom，left中的一个来指定渐变的起点
.test{
background:-webkit-linear-gradient(top,#fff,#000);
background:-moz-linear-gradient(top,#fff,#000);
background:-o-linear-gradient(top,#fff,#000);
background:linear-gradient(top,#fff,#000);
2、稍微复杂一点，可以使用top与left或者right组合，也可以使用bottom与left或者
right组合来改变渐变起点。但是切记：top不能和bottom组合，left不能和right组合
.test{ background:-webkit-linear-gradient(top right,#fff,#000);
background:-moz-linear-gradient(top right,#fff,#000);
background:-o-linear-gradient(top right,#fff,#000);
background:linear-gradient(top right,#fff,#000);
}
.test{ background:-webkit-linear-gradient(bottom left,#fff,#000);
background:-moz-linear-gradient(bottom left,#fff,#000);
background:-o-linear-gradient(bottom left,#fff,#000);
background:linear-gradient(bottom left,#fff,#000);
}
3、上面两种写法只能够画出有限的几种渐变。我们可以使用角度来设置渐变的起点。
以下面的代码为模板，将“0deg”修改成你想要的角度
.deg0{ background:-webkit-linear-gradient(0deg,#fff,#000);
background:-moz-linear-gradient(0deg,#fff,#000);
background:-o-linear-gradient(0deg,#fff,#000);
background:linear-gradient(0deg,#fff,#000);
}
我添加了12个div，以30deg为差值。
根据结果，我又画出了这张图
可以看出，在使用角度设定渐变起点的时候，0deg对应botton，90deg对应left，180deg对应top，360deg对应right。整个过程就是以bottom为起点逆时针旋转。
关于起点的内容我暂时只了解到这么多，以后如果草案做了修改，我了解之后会立马更新。
渐变颜色设置也可以花样繁多：渐变的颜色可以不止两种，在起点颜色和终点颜色之间可以添加更多颜色。
.test{ background:-webkit-linear-gradient(top,#fff,red,#000,red);
background:-moz-linear-gradient(top,#fff,red,#000,red);
background:-o-linear-gradient(top,#fff,red,#000,red);
background:linear-gradient(top,#fff,red,#000,red);
}
或者：
.test{ background:-webkit-linear-gradient(top,red,yellow,blue,green,purple,orange);
background:-moz-linear-gradient(top,red,yellow,blue,green,purple,orange);
background:-o-linear-gradient(top,red,yellow,blue,green,purple,orange);
background:linear-gradient(top,red,yellow,blue,green,purple,orange);
}
上面的例子中，颜色的渐变都是均匀的，我们也可以给每一种颜色指点渐变的位置，从而使渐变不是单纯的均匀变化，这个也很简单，只要在你想修改的颜色后面加上渐变的文职就可以了。为了简单直观，我只用三种颜色。
均匀变化
.test{ background:-webkit-linear-gradient(red ,green,blue);
background:-moz-linear-gradient(red ,green,blue);
background:-o-linear-gradient(red ,green,blue);
background:linear-gradient(red ,green,blue);
}添加了位置后
.test{ background:-webkit-linear-gradient(red 50% ,green,blue);
background:-moz-linear-gradient(red 50% ,green,blue);
background:-o-linear-gradient(red 50% ,green,blue);
background:linear-gradient(red 50% ,green,blue);
}
当然，如果颜色格式使用CSS3中的rgba格式，那么渐变将会是透明的。
关于线性渐变（linear-gradient）的介绍就到此为止了，有错误之处欢迎留言。
等我研究了径向渐变（radial-gradient）我在不上径向渐变的笔记
热心网友
时间：2022-05-12 21:05
