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;