渐变
渐变分为线性渐变和径向渐变。
线性渐变 linear-gradient
渐变的实现由两部分组成:渐变线和色标。渐变线用来控制发生渐变的方向;色标包含一个颜色值和一个位置,用来控制渐变的颜色变化。浏览器从每个色标的颜色淡出到下一个,以创建平滑的渐变,通过确定多个色标可以制作多色渐变效果。 使用渐变色做背景已经很常见了:
语法:
background:linear-gradient(方向或角度,第一个颜色,第二个颜色,第三个颜色…);
方向或角度:
(1)默认从上到下,无需输入。
div{
width:100px;height:100px;background: linear-gradient(green,yellow);
}
如果需要从下到上渐变可以使用to top
div{
width:100px;height:100px;background:linear-gradient(to top,#fff,#000);
}
(2)从左到右,使用to right
.foo {
background: linear-gradient(to right,green,yellow);
}
从右到左,使用to left
.foo {
background: linear-gradient(to left,green,yellow);
}
(3)对角
从左上角到右下角,可以使用to bottom right
.foo {
background: linear-gradient(to bottom right,green,yellow);
}
从右下角到左上角,可以使用to top left
.foo {
background: linear-gradient(to top left,green,yellow);
}
从右上角到左下角,使用to bottom left
.foo {
background: linear-gradient(to bottom left,green,yellow);
}
从左下角到右上角,可以使用to top right
.foo {
background: linear-gradient(to top right,green,yellow);
}
可以给定数值设置渐变角度,如0deg,45deg,-90deg等等。
如0deg将创建一个从下到上的渐变,90deg将创建一个从左到右的渐变。
实例:
.foo {
background: linear-gradient(20deg,green,yellow);
}
色标,color-stop
由一个color值组成,并且跟随着一个可选的终点位置(可以是一个百分比值或者是沿着渐变轴的length)。
未设置位置时默认情况下颜色均匀分布。
有时候我们不希望一开始就出现渐变,可以从中间某个地方开始最好。这时候就可以使用百分比等了。
实例,我想让这个绿色在80%的时候结束。
.foo {
background: linear-gradient(to right,green 80%,yellow);
}
实例2,使yellow从10%的位置开始渐变。
.foo {
background: linear-gradient(to right,green,yellow 10%,orange);
}
径向渐变 radial-gradient
语法:
.foo {
background-image: radial-gradient(渐变的形状以及所要开始渐变的位置, 开始的第一个颜色,第二个颜色, …,结束颜色);
}
形状包括如下2个参数:
ellipse椭圆形(默认)
circle圆形
实例:
.foo {
width: 200px; height: 100px;
background-image: radial-gradient(red,green,yellow);
}
实例2,按正圆渐变:
.foo {
width: 200px; height: 100px;
background-image: radial-gradient(circle,red,green,yellow);
}
设置渐变的大小:
(1)farthest-corner(默认):指定径向渐变的半径长度为从圆心到离圆心最远的角。
farthest-side :与closest-side相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)。
实例,设置一个椭圆,渐变中心点在x轴30px,y轴20px:
.foo {
width: 200px; height: 100px;
background-image: radial-gradient(ellipse farthest-corner at 30px 20px,red,green,yellow);
}
(2)closest-side :渐变的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)。
closest-corner : 指定径向渐变的半径长度为从圆心到离圆心最近的角
.foo {
background-image: radial-gradient(ellipse closest-side at 30px 20px,red,green,yellow);
}
position
position与background-position或者transform-origin类似。如缺省,默认为中心点center。
color
与linear-gradient相似, color + 一个百分比值或者length;
重复渐变
1.渐变重复 repeating-linear-gradient
语法:
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, …);
实例:
div{
width: 200px; height: 100px;
background-image: repeating-linear-gradient(90deg,red,green 20%);
}
如下效果:
.div1{
width: 200px; height: 100px;
background-image: repeating-linear-gradient(90deg, orange, orange 25px, #FFF 25px, #FFF 50px);
}
.div2{
background-image: repeating-linear-gradient(45deg, red, red 25px, #FFF 25px, #FFF 50px);
}
2.径向渐变重复 repeating-radial-gradient
如下例子,可以通过使用background叠加,实现如下效果。
代码如下:
div{
.mydiv {
width: 200px;
height: 200px;
border-radius: 50%;
background: repeating-radial-gradient(orange,orange 3px,yellow 4px,red 5px);
}
}
如下,制作一个动态变化的背景,结合animation实现。
.dynamics {
width: 300px;
height: 100px;
background: linear-gradient(
90deg,
orange,
red,
pink,
yellow,
green,
black,
orange
);
background-size: 800% 100%;
animation: dynamics 5s ease infinite;
}
@keyframes dynamics {
0% {
background-position: 0% 0%;
}
50% {
background-position: 50% 0%;
}
100% {
background-position: 100% 0%;
}
}
更多详细可以参考
https://www.zhangxinxu.com/wordpress/2017/11/css3-radial-gradient-syntax-example/
背景
在一个声明中设置所有背景属性:
body{
background:#fff url(aa.jpg) no-repeat fixed top;
}
background定义和用法,它包括如下属性
background-color
设置元素的背景颜色。
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。
transparent 值说明
尽管在大多数情况下,没有必要使用 transparent。不过如果您不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计,那么设置 transparent 值还是有必要的。
background-color包括的值如下:
(1)background-color:red;使用颜色名称
(2)background-color:#ff5200;使用十六进制
(3)background-color:rgba(255,255,255,0.5);使用rgb
(4)background-color:transparent;默认为transparent.
background-position
设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。提示:您需要把 background-attachment 属性设置为 “fixed”,才能保证该属性在 Firefox 和 Opera 中正常工作。
值包括两个参数,第一个参数表示背景在垂直轴的位置(top,center,bottom),第二个参数表示在水平轴上的位置(left,center,right),如果你只设置了一个参数,第二个参数默认将是center。
值还可以使用百分比设置,一个值是水平位置,第二个值是垂直位置。如:左上角是0% 0%,右下角是100% 100%,如果您仅设置了一个值,则另一个是50%。
实例:
div{
background-position:top center;
background-position:20% 30%;
}
background-repeat
设置是否及如何重复背景图像。默认地,背景图像在水平和垂直方向上重复。
值如下:
repeat 默认,背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。
值包括:
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时,背景图像不会移动。
background-image
为元素设置背景图像。元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
值如下:
background-image:url(aa.jpg);设置一张背景图
background-image:none;不显示背景图像。
background-size
设置背景图片的尺寸。
它的值可以设置如下:
(1)使用固定值表示,将有两个值,第一个值表示宽度,第二个值表示高度,如果只设置了第一个值,则第二个值会默认会被设置为auto。
div{
background-size:100px 200px;
/*设置背景图片的大小为宽100px高200px*/
}
(2)设置百分比,以父元素的百分比来设置背景图像的宽度和高度,第一个值设置宽度,第二个值设置高度。同理,如果第二个值未设置默认是auto;
div{
background-size:50% 20%;
}
(3)cover
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
div{
background-size:cover;
}
(4)contain
把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
div{
background-size:contain;
}
background-origin
规定背景图片的定位区域。规定 background-position 属性相对于什么位置来定位。注释:如果背景图像的 background-attachment 属性为 “fixed”,则该属性没有效果。
它的值包括如下:
(1)padding-box背景图像相对于内边距框来定位。
(2)border-box 背景图像相对于边框盒来定位。
(3)content-box背景图像相对于内容框来定位。
padding-box效果如下:
div{
border: 20px solid rgba(0,0,0,0.3);
padding: 20px;
width: 300px;
height: 200px;
background-image: url("http://gnmro-img.oss-cn-shanghai.aliyuncs.com/icon/100.png!ora");
background-repeat: no-repeat;
background-origin: border-box;
}
border-box效果如下:
div{
border: 20px solid rgba(0,0,0,0.3);
padding: 20px;
width: 300px;
height: 200px;
background-image: url("http://gnmro-img.oss-cn-shanghai.aliyuncs.com/icon/100.png!ora");
background-repeat: no-repeat;
background-origin: border-box;
}
content-box效果如下:
div{
border: 20px solid rgba(0,0,0,0.3);
padding: 20px;
width: 300px;
height: 200px;
background-image: url("http://gnmro-img.oss-cn-shanghai.aliyuncs.com/icon/100.png!ora");
background-repeat: no-repeat;
background-origin: content-box;
}
background-clip
规定背景的绘制区域,
值如下:
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
在一个背景中同时设置多个背景图片
div{
width: 500px;
height: 300px;
border: 1px solid #ff5200;
background: url("http://gnmro-img.oss-cn-shanghai.aliyuncs.com/test/t1.png!ora")
0 0 no-repeat,
url("http://gnmro-img.oss-cn-shanghai.aliyuncs.com/test/t2.png!ora") 200px
100px no-repeat;
}
效果如下: