CSS_背景属性

1.背景色

background-color: red;
/*设置背景色为红色*/

2.背景图片

background-image: url('../img/1.jpg');
/*设置背景图片（默认平铺）*/

background-repeat: no-repeat;
/*不平铺*/
background-repeat: repeat-x;
/*横向平铺*/
background-repeat: repeat-y;
/*纵向平铺*/

background-position: 20px 100px;
/*设置背景图片位置X轴20px，Y轴100px*/
background-position-x: 30px;
/*单独设置x轴位置*/
background-position-y: 30px;
/*单独设置y轴位置*/

3.背景定位

　　关键字：

background-position: top left;
/*背景图片设置在左上方*/
background-position: top center;
/*顶部中间*/
background-position: center right;
/*右边中间*/
background-position: center center;
/*中心位置*/

　　百分比：

background-position: 50% 50%;
/*中心位置*/
background-position: 100% 100%;
/*右下角*/

 4.设置背景图片大小

background-size: 320px 460px;
/*设置背景图片宽度320像素，长度460像素*/

 5.背景圆角

border-radius: 15px;
/*圆角半径为15像素*/
border-top-left-radius: 15px;
/*只设置左上角圆角半径15像素*/
border-top-left-radius: 15px 30px;
/*左上角，圆角半径水平方向15像素，垂直方向30像素*/

border-radius: 50%;
/*设置宽高的一半 50% 则为圆*/

 6.阴影

box-shadow: 20px 20px 50px blue;
/*第一个值是阴影水平方向上的变异度，第一个值是垂直方向上的偏移，第三个值是阴影的模糊度，第四个值是阴影颜色*/
box-shadow: 20px 20px 50px blue inset;
/*inset：表示阴影内射*/