css-5.背景和渐变

背景

·背景色
background-color
transparent 设置透明
·背景图片
background-image
eg:
background-image: url(img/head2.png);
background-size: 100px 200px; /*背景图大小，少用，失真*/
background-repeat: repeat;
/*repeat no-repeat repeat-x repeat-y*/
background-position: center;/*图片位置*/
background-position: 20px 20px;
body{
background-image: url(img/head2.png);
background-attachment: fixed;
} /*background-attachment 背景固定*/

css sprites  css精灵

渐变

·使用background-image属性进行设置
linear-gradient：线性渐变
radial-gradient：径向渐变
repeating-linear-gradient:重复线性渐变
repeating-radial-gradient：重复径向渐变

-linear-gradient：线性渐变
linear-gradient（angle，color1，color2···）
·角度可以to top （0°） to right （90°）
background-image: linear-gradient(180deg,green,red);
background-image: linear-gradient(to right,yellow 30%,red 70%);
/*颜色的百分比，第一个值要比第二个小才可以，否则没有渐变*/

-radial-gradient：径向渐变
radial-gradient（size at position ，color1，color2···）
/*background-image: radial-gradient(100px at left bottom ,yellow,red);*/
/*background-image: radial-gradient(100px at center ,yellow,red);*/
background-image: radial-gradient(100px at 50px 20px ,yellow,red);
/*radial-gradient（size at position ，color1，color2···）
* size 是半径大小
* */

- /*background-image: radial-gradient(100px at 50px 20px ,yellow,red);*/
background-image: repeating-radial-gradient(10px at center ,red 0% ,yellow 20%);