css渐变/背景_html/css_WEB-ITnose

1.线性渐变（gradient变化）

　　linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。

上图是从黄色渐变到绿色

background:linear-gradient(

　　to right 表示方向（left top right left 或者用度数表示）

　　yellow,渐变其实颜色

　　green 渐变终止颜色

);

background:linear-gradient(
to right,
red 0%, red 25% ,
blue 25%,blue 50%,
green 50%,green 75%,
pink 75% ,pink 100%
); //起止颜色，终止颜色.

background: linear-gradient(
135deg,
black 25%,
transparent 25%,
transparent 50%,
black 50%,
black 75%,
transparent 75%
);

background-size: 100px 100px;

animation: move 1s linear infinite;

@keyframes move {
from {}
to {
background-position: 100px 0;
}
}

1、必要地 元素

　　方向

　　气质颜色

　　终止色

2.径向渐变（radial径向）

radial-gradient(径向渐变指从一个中心开始沿着四周产生渐变效果)

background:radial-gradient(

　　150px at center

　　yellow,

　　green

);

//围绕中心点做渐变，半径是150px，从黄颜色到绿颜色做渐变.

1、必要的元素：

a、辐射范围即圆半径 (半径越大，渐变效果越大)

b、中心点 即圆的中心 (中心点的位置是以盒子自身)

background: radial-gradient(
150px at left center,
yellow,
green
);

以左上角为圆的中心点

background: radial-gradient(
150px at 0px 0px,
yellow,
green
);

c、渐变起始色

d、渐变终止色

2、关于中心点：中心位置参照的是盒子的左上角

3、关于辐射范围：其半径可以不等，即可以是椭圆

div{
width: 300px;
height: 300px;
margin:100px auto;
background: radial-gradient(
250px at 0px 0px,
yellow,
green
);
border-radius: 150px;
}

3.背景

　　背景在css中也得到很大程度的增强，比如背景图片的尺寸、背景裁切区域，背景定位参照点、多重背景等。

background-size：width,height可以设置背景图片的宽度以及高度

1、background-size设置背景图片的尺寸

background-size:600px,auto;

自动是适应盒子的宽度
background-size: 100% auto; 当宽度发送改变时，高度会有内容溢出。

常规用法，通过百分百，和像素来调整背景的尺寸.

background-size: auto 100%;

cover会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。

整个背景图片完整显示在背景区域.

contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

也可以使用长度单位或百分比

2、background-origin(原点，起点)

设置背景定位的原点

所谓的背景原点就是背景位置的一个参照点

调整背景定位的参照原点

background-repeat: no-repeat;