背景控制的常用属性

1. 背景色

background-color: lightgreen;

2.控制背景的覆盖范围限制在内容区

background-clip: border-box;  /* 背景色超出内容区 */
background-clip: content-box;  /* 背景色在内容区 */

3.渐变

background: linear-gradient(red, yellow);
background: linear-gradient(45deg, red, yellow);
/* 向右渐变 */
background: linear-gradient(to right, red, yellow);
/* 向左渐变 */
background: linear-gradient(
     to left,
     rgba(255, 0, 0, 0.5),
     white,
     yellow,
     white,
     yellow
);

4.背景图片

background-image: url("girl.jpg"); 
/* 不重复铺张 */
background-repeat: no-repeat;
/* 向y轴重复铺张 */
background-repeat: repeat-y; 
/* 向x轴重复铺张 */
background-attachment: fixed;

5.背景定位: 位置

background-position: 50px 60px; 
/* 下面两个效果相同 */
background-position: right center;
background-position: center right;
/* 只写一个，第二个默认就是center */
background-position: left; 
background-position: 50% 20%;
/* 只写一个，第二个默认就是50% */
background-position: 50% 50%;

/* 简写 */
background: url("girl.jpg") no-repeat center;

.box:hover {
 /* 外发光  加投影*/
 box-shadow: 0 0 8px #888;
 cursor: pointer;
}